+ 12

HTML canvas

How do i draw a dot using html canvas ?

6th Mar 2017, 4:04 PM
Akshata
Akshata - avatar
8 Answers
+ 18
context.beginPath(); context.arc(canvas.width/2,canvas.height/2,1,0,Math.PI*2); context.fill();
6th Mar 2017, 4:35 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 12
ty burey
6th Mar 2017, 7:55 PM
Akshata
Akshata - avatar
+ 9
@Valentin Hacker can you please explain what have you done there , sorry the canvas concept is new to me
6th Mar 2017, 4:42 PM
Akshata
Akshata - avatar
+ 9
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
6th Mar 2017, 7:23 PM
Burey
Burey - avatar
+ 8
ctx.fillRect(x,y,1,1);
6th Mar 2017, 4:22 PM
Patrik Sokol
Patrik Sokol - avatar
+ 8
canvas is an element in HTML5 that is used as a container to draw about everything. its API supply many methods for that introduction: https://www.w3schools.com/graphics/canvas_intro.asp methods can be found here: https://www.w3schools.com/tags/ref_canvas.asp
6th Mar 2017, 4:47 PM
Burey
Burey - avatar
+ 5
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? http://stackoverflow.com/a/4900656
7th Mar 2017, 4:49 AM
Kirk Schafer
Kirk Schafer - avatar
+ 4
thanks for visit and like my code😃 you start learning html CSS and JavaScript with w3sChools?
10th Mar 2017, 9:36 PM
mohsen tajik
mohsen tajik - avatar