HTML canvas

Question

How do i draw a dot using html canvas ?

Answer 1

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

Answer 2

ty burey

Answer 3

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

Answer 4

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

Answer 5

ctx.fillRect(x,y,1,1);

Answer 6

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

Answer 7

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

Answer 8

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