Lesson Code: http://www.developphp.com/video/HTML/Canvas-Draw-Function-Set-Up
In this video lesson series you can learn all about how to draw into the HTML5 canvas tag using Javascript. The canvas tag is aptly named. It supplies you with a means of drawing things through script and it renders in a browser. Things can be stationary or animated inside of a canvas tag. We can use Javascript to draw what we want in the canvas so in this series we will demonstrate some of the drawing methods one can use. We will also demonstrate how to animate things inside of the canvas tag using Javascript.
Original source
21 responses to “HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript”
It said this :
cycles.html:25 Uncaught TypeError: Cannot read property 'getContext' of null
at draw (cycles.html:25)
What to do?
It is not an animation
0:00 looks high.
Thank you so much
good video
You can make many things make a html 5 game you are simply awesome
Excellent tutorial! I'm a mostly c# programmer learning some web development. This is still relevant stuff in 2017. Subscribed.
canvas element will not show on my chrome(I reinstalled and updated it to latest version so definitely its not browser issue).
Here's my code. Please help I have been stuck for hours. I don't know what i'm doing wrong.
<html>
<head>
<script type = "text/javascript">
window.onload = draw;
function draw(){
var canvas = document.getElementbyId('gamecanvas');
var canvascontext = canvas.getContext("2d");
canvascontext.fillStyle = 'black';
canvascontext.fillRect(36,10,22,12);
}
</script>
</head>
<body>
<canvas id = "gamecanvas" width = "400" height = "300">
</canvas>
</body>
</html>
Great instructions, nice slow pace, perfect for beginners such as myself.
This is exactly what I was looking for. I was thinking of making a program that randomly turns OFF pixels in a square array (pixels or squares made up of X pixels) but wasn't sure how to connect the pure coding of it to the graphical part. Been over 10 years since I did anything with javascript. So, now, just replace the hard coded coord with variables with multiplier constants for the offsets and it should work.
its not opening in my chrome,how do i enable it
Great tutorial, thanks! Even made me laugh a little bit.
"It I want X 10, I do 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. If I want Y 21, it would be 1,2,3,4…. CUT" 😀 😀
HTLM5 now has the recommendation status.
U r best in the world teacher
Adam Khoury thanks for sharing your knowledge!
Please teach us how to program drag and drop, as you show 5:30
Regards!
Muchas Gracias por tus videos
Thank you a lot. This clear and direct
This is well thought out and well presented – thank you. Thumbs up from me.
you sound like oscar from the office
hi, i write exact your code but its show me black box in firefox and green on chrome what's going wrong… here is the code…
// Assign our canvas element to variable
var canvas = document.getElementById("canvas");
// Create the HTML5 context object to enable draw methods
var ctx = canvas.getContext("2d");
// fillStyle(r,g,b,alpha);
ctx.fillStyle = "rgba(0,200,0,1);"
// fillRect(X,Y,width,height);
ctx.fillRect(36,10,22,22);
<3