Learning HTML5 Canvas - Intro and Shapes - Episode 1

This tutorial covers the fundamentals of working with the HTML5 Canvas and how to draw simple shapes like squares, rectangles, circles, ellipses, and arcs.

[judeharding]

Hi Steve - great video. Just a quick note. at the 6:00 mark, I noticed that your comment on line 50 and your comment on line 54 may need to be switched. ( might be wrong ). ;-)

[MikeX-rmbb]

Heyo! I'm following this tutorial, but my code doesn't seem to work. My canvas can change its properties, but I can't get anything to spawn in there. The ctx.rect() doesn't really work for me, do you know what's up? I'm running on chrome by the way, and tried copying your code directly too, but that didn't work either!

[saminasaif]

Nicely explain ..
please guide me i create triangle using pythogoras theorem in canvas using javascript but i cant understand how to label a, b, c crosponding to its angles

[devT]

Is in ellipse(), rotation means angle between radiusX and x-axis?

[Merlinke]

hey! how would you display the fetched data on the canvas? with the style you get from the data as well? And after you would have a blinking cursor, and still able to write text with the same style you had before? I know its much, but I got this exercise as a student. And I also need to use Typescript. Pretty difficult, for the first time using Canvas. :DD

[armyteguh]

sir, on the Line 48 what's gonna happen if we fill the coordinat X & Y with negative numbers ??

[tedshapera]

Great tutorial, thanks for the great videos.
I was experimenting with the arc statement and am getting an unexpected result (I must be missing something).
If I code: ctx.arc(400, 100, 50, 0, Math.PI / 2, true); // should be 0 degrees to 90 degrees?
I was expecting a quarter of a circle starting on the positive x-axis and ending on the positive y-axis (since I set anticlockwise to true).
HOWEVER what I get is 3/4 of a circle starting from 0 rad(positive x-axis) & ending at 3/2*PI rads ( negative y-axis).
Is this a javascript qwirk?

[eric]

Thanks can you do a video on how to compress and reduce image size with canvas