Homework Starter Code: http://www.developphp.com/video/HTML/Canvas-Draw-Lines-and-Filled-Shapes-Tutorial
In this HTML5 canvas lesson we demonstrate how to plot and draw lines for custom shapes. Learn to draw shapes, fill them, stroke them, color them, and complete the homework assignment laid out in the video.
Original source
28 responses to “HTML5 Canvas Tutorial Draw Lines and Filled Shapes Using Javascript”
Can anyone help me how to understand X Y coordinates
You fail son~ hahaha thanks for the video!!
how to draw democratic republic of congo flaf usig html and css, plz send me all code
Can you make a tutorial like how to create and resize a line in canvas? this appear in minute 0:58 i want to do that with the mouse like you in minute 0:58
How do you increase the thickness of the line when you are stroking?
someone please explain to me why this does not work.<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="paper" width="300" height="500"></canvas>
<script>
window.onload=draw;
function draw(){
var paper=document.getElementById("paper")
var ctx=paper.getContext("2d")
ctx.rect(200, 200, 100, 60)
ctx.fill("black")
}
</script>
</body>
</html>
4 years later………………
^ ^
/ _ / _/
/ / /
/ /__ __ /
i waana learn coordinates. can u please help me for this. Like how can i make different drawing using coordinates. Any tools available for that. ?
thanks
hello, where's the next tutorial ?
did it! hint? its a mirror 馃檪
Great tutorial thanks. Do you know what they browser compliance is like for this?
hola, oye una pregunta en la parte de al principio de tu video, mencionas algo acerca de de la l贸gica para crear figuras con el rat贸n?, la pregunta seria haz tratado o desarrollado un programa que dibujes lineas con el raton pero a la vez con esas lineas hagas figuras como cuadrados o poligonos y que a la vez los guardes?? como muestras al principio del video
Uhuuu! I did it! Easy!
Yey!!
Basic maths, but it took a face-plant to see it, and I'm only a beginner. Great tuts by the way. 馃榾
dons't work at all wtf
that was adam sandler off the water boy haha
Use Adobe Fireworks
He's using Adobe Fireworks.
lol
hehehehe mines look type retarded hehehehe
-_- this is frustrating me, i got 3 parts out of the 5, but how do you know what is the point position?
for the third shape i use
ctx.moveTo(130, 60); just to put in the another side
Well that's weird, it's either you don't allow people to send messages to you or… I'm a youtube noob who haven't tried sending private messages here and can't find the button XD
nope, just an ordinary pc calculator. I was gonna put the logic here but the video said not to post the answers here and ruin it for people. But since you already tried, I'm gonna pm the logic just for you, sorry flash.
how did you know which numbers ctx.lineTo(65, 40); did you use a graph calculator
did it. nice tutorial
Man, you're little crazy 馃檪 You are the BOSS!