alert("Thanks for visiting the code..\n\nTouch the screen anywhere at two points to draw first line\n\nThen keep on touching the screen to make a closed or open path."); alert("Code is under development..\n\nSuggestions are mostwelcome.."); $(function(){ $(document).ready(canvasSetUp); $(window).on('orientationchange',canvasSetUp); var w,h,cxt; function canvasSetUp() { w=screen.width; h=screen.height; if(w>h) {$('#graphics').attr('width',w-90); $('#graphics').attr('height',w-100);} else {$('#graphics').attr('width',w-20); $('#graphics').attr('height',w+50);} $('#graphics').css('border','1px solid red'); cxt = $('#graphics')[0].getContext('2d'); cxt.strokeStyle='blue'; {let cndtn1 = w/10; let cndtn2 = w/50; for(let j=1;j'); $('.container:eq(0)').append(clrstroke); clrstroke.css('background-color',colors[j]); clrstroke.on('click',color); clrstroke.html(colors[j]); clrstroke.on('click',dropDown1); $('.container:eq(0)').slideUp(0);} function color(){ cxt.strokeStyle=$(this).html(); if(i!=0) {cxt.beginPath(); cxt.moveTo(x,y);} } //Starts a new line. $('button:eq(2)').on('click',resetOrigin); function resetOrigin(){i=0;} //fill the shape drawn. $('button:eq(3)').on('click',dropDown2); function dropDown2() { $('.container:eq(1)').slideToggle(1000);} for(j=0;j'); $('.container:eq(1)').append(clrfill); clrfill.css('background-color',colors[j]); clrfill.on('click',colorf); clrfill.html(colors[j]); clrfill.on('click',dropDown2); $('.container:eq(1)').slideUp(0);} function colorf(){ cxt.fillStyle=$(this).html(); cxt.fill(); } //Change line width $('button:eq(4)').on('click',dropDown3); function dropDown3() { $('.container:eq(2)').slideToggle(1000);} for(j=0;j<7;j++) {var lwh=$(''); $('.container:eq(2)').append(lwh); lwh.on('click',lineWidth); lwh.html(j+2); lwh.on('click',dropDown3); $('.container:eq(2)').slideUp(0);} function lineWidth(){ cxt.lineWidth=$(this).html(); if(i!=0) {cxt.beginPath(); cxt.moveTo(x,y);} } //Defining line join type.. $('button:eq(5)').on('click',dropDown4); function dropDown4() { $('.container:eq(3)').slideToggle(1000);} var endType=['round','butt','miter']; for(j=0;j<3;j++) {var lje=$(''); $('.container:eq(3)').append(lje); lje.on('click',lineEnds); lje.html(endType[j]); lje.on('click',dropDown4); $('.container:eq(3)').slideUp(0);} function lineEnds(){ cxt.lineJoin=$(this).html();} //Close path function... $('button:eq(6)').on('click',closePath); function closePath(){ cxt.lineTo(crdints[0],crdints[1]); cxt.stroke(); i=0;} $('.help:eq(0)').click(function(){ $('.help:eq(1)').slideToggle(1000);}) $('.help:eq(1)').slideUp(0); var shapes = [ 'circle','rectangle','q_curve','b_curve']; var drawfncn = [ drawArc,drawRect,drawqCurve,drawbCurve]; $('button:eq(7)').on('click',dropDown5); function dropDown5() { $('.container:eq(4)').slideToggle(1000);} for(j=0;j'); $('.container:eq(4)').append(c_shape); c_shape.css('background-color','gray'); c_shape.html(shapes[j]); c_shape.on('click',dropDown5); c_shape.on('click',drawfncn[j]); $('.container:eq(4)').slideUp(0);} $('#data_block').hide(0); function drawArc() { var inpt1 = $("Center of arc:
"); $('#data_block').append(inpt1); var inpt2 = $("Radius of arc:
"); $('#data_block').append(inpt2); var inpt3 = $("Starting angle:
"); $('#data_block').append(inpt3); var inpt4 = $("Starting angle:"); $('#data_block').append(inpt4); var inpt5 = $("

"); $('#data_block').append(inpt5); var inpt6 = $(""); inpt6.on('click',function(){ var x1 = $('input:eq(0)').val(); var y1 = $('input:eq(1)').val(); var r = $('input:eq(2)').val(); var a1 = $('input:eq(3)').val(); var a2 = $('input:eq(4)').val(); var rot; $('select:eq(0)').on('change',function() { rot = $('select:eq(0)').val();}); cxt.beginPath(); cxt.arc(x1,y1,r,a1,a2*Math.PI,rot); cxt.stroke(); crdints[0]=x1-(-r*Math.cos(a1*Math.PI)); crdints[1]=y1-(-r*Math.sin(a1*Math.PI)); i++;}); $('#data_block').append(inpt6); inpt6.css({'position':'relative','left':'20%'}); var inpt7 = $(""); inpt7.on('click',function(){ $('#data_block').toggle(1000); $('#data_block').empty();}); $('#data_block').append(inpt7); inpt7.css({'position':'relative','left':'40%'}); $('#data_block').toggle(1000);} function drawRect() { var inpt1 = $("Corner of rectangle:
"); $('#data_block').append(inpt1); var inpt2 = $("Width of rectangle:
"); $('#data_block').append(inpt2); var inpt3 = $("Height of rectangle:

"); $('#data_block').append(inpt3); var inpt4 = $(""); inpt4.on('click',function(){ var x1 = $('input:eq(0)').val(); var y1 = $('input:eq(1)').val(); var w1 = $('input:eq(2)').val(); var h1 = $('input:eq(3)').val(); cxt.beginPath(); cxt.rect(x1,y1,w1,h1); cxt.stroke();}); $('#data_block').append(inpt4); inpt4.css({'position':'relative','left':'20%'}); var inpt5 = $(""); inpt5.on('click',function(){ $('#data_block').toggle(1000); $('#data_block').empty();}); $('#data_block').append(inpt5); inpt5.css({'position':'relative','left':'40%'}); $('#data_block').toggle(1000);} function drawqCurve() { var inpt1 = $("Starting point:
"); $('#data_block').append(inpt1); var inpt2 = $("Control point:
"); $('#data_block').append(inpt2); var inpt3 = $("End point:

"); $('#data_block').append(inpt3); var inpt4 = $(""); inpt4.on('click',function(){ var x1 = $('input:eq(0)').val(); var y1 = $('input:eq(1)').val(); var x2 = $('input:eq(2)').val(); var y2 = $('input:eq(3)').val(); var x3 = $('input:eq(4)').val(); var y3 = $('input:eq(5)').val(); cxt.beginPath(); cxt.moveTo(x1,y1); cxt.quadraticCurveTo(x2,y2,x3,y3); cxt.stroke(); crdints[0]=x1; crdints[1]=y1; i++;}); $('#data_block').append(inpt4); inpt4.css({'position':'relative','left':'20%'}); var inpt5 = $(""); inpt5.on('click',function(){ $('#data_block').toggle(1000); $('#data_block').empty();}); $('#data_block').append(inpt5); inpt5.css({'position':'relative','left':'40%'}); $('#data_block').toggle(1000);} function drawbCurve() { var inpt1 = $("Starting point:
"); $('#data_block').append(inpt1); var inpt2 = $("First control point:
"); $('#data_block').append(inpt2); var inpt3 = $("Second control point:
"); $('#data_block').append(inpt3); var inpt4 = $("End point:

"); $('#data_block').append(inpt4); var inpt5 = $(""); inpt5.on('click',function(){ var x1 = $('input:eq(0)').val(); var y1 = $('input:eq(1)').val(); var x2 = $('input:eq(2)').val(); var y2 = $('input:eq(3)').val(); var x3 = $('input:eq(4)').val(); var y3 = $('input:eq(5)').val(); var x4 = $('input:eq(6)').val(); var y4 = $('input:eq(7)').val(); cxt.beginPath(); cxt.moveTo(x1,y1); cxt.bezierCurveTo(x2,y2,x3,y3,x4,y4); cxt.stroke(); crdints[0]=x1; crdints[1]=y1; i++;}); $('#data_block').append(inpt5); inpt5.css({'position':'relative','left':'20%'}); var inpt6 = $(""); inpt6.on('click',function(){ $('#data_block').toggle(1000); $('#data_block').empty();}); $('#data_block').append(inpt6); inpt6.css({'position':'relative','left':'40%'}); $('#data_block').toggle(1000);}});

🖌️🖌️🤗HTML paint fun🤗✏️✏️