HTML canvas | Sololearn: Learn to code for FREE!


HTML canvas

How do i draw a dot using html canvas ?

3/6/2017 4:04:57 PM


8 Answers

New Answer


context.beginPath(); context.arc(canvas.width/2,canvas.height/2,1,0,Math.PI*2); context.fill();


ty burey


@Valentin Hacker can you please explain what have you done there , sorry the canvas concept is new to me


here is a short example on how to use the canvas: 1) create canvas element in the HTML with an id: <canvas id="myCanvas"></canvas> 2) find the element with javascript: var canvas=document.getElementById("myCanvas"); 3) get 2d context for the canvas (there are other context types, for now we will use 2d): var ctx=canvas.getContext("2d"); 4) draw something: let's draw a filled green circle with a radius of 10 at coordinate (100,100) of the canvas: ctx.beginPath(); // begin/reset the path ctx.fillStyle="green"; // set fill color ctx.arc(100,100,10,0,Math.PI*2); ctx.fill(); // apply fill (this will draw a filled circle) ctx.closePath(); // close the path the paramaters sent to arc are as follows: arc(x, y, r, sAngle, eAngle, counterclockwise) x, y, r paramaters are quite self explainatory, coordinates and radius. sAngle is the starting angle, eAngle is the end so 0 to Math.PI*2 fills a complete circle. so if you wanna draw pac-man in the future, just try to play with those 2 paramaters xD and counterclockwise is an optional paramater stating the direction in which we draw the circle. another useful methos is ctx.stroke() which will draw just a circle with no fill and to set it's color, use: ctx.strokeStyle="blue"; // or any other color




canvas is an element in HTML5 that is used as a container to draw about everything. its API supply many methods for that introduction: methods can be found here:


Saw this earlier...You might like this 'set pixel' comparison and speed test: What is the best way to set a pixel in an HTML5 canvas?


thanks for visit and like my code😃 you start learning html CSS and JavaScript with w3sChools?