HTML5 Canvas - Let's Draw!
5 likes•3,291 views
The document outlines the HTML5 canvas, describing it as a 2D bitmap element used to draw shapes, images, and manipulate pixels without layers or objects. It explains how to create a canvas, draw with JavaScript, and save the image generated on it. Examples include code snippets for rendering shapes, images, and text, along with various external resources and artworks referenced throughout.
![var w = canvas.width;
var h = canvas.height;
new image array
var img = ctx.createImageData(w, h);
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
// each pixel has four values
var idx = (x + y * w) * 4;
// 0 red, 1 green, 2 blue, 3 alpha
img.data[idx + 0] = x;
img.data[idx + 1] = 255-x;
img.data[idx + 2] = 0;
img.data[idx + 3] = 255;
}
} result
ctx.putImageData(img, 0, 0); write to canv
as](https://image.slidesharecdn.com/canvas-111218134846-phpapp01/85/HTML5-Canvas-Let-s-Draw-18-320.jpg)
![var img = document.
getElementsByTagName('img')[0];
var canvasImg =
canvas.toDataURL("image/png");
returns “data:ima
ge/png;base64,
img.src = canvasImg; iVBORw0KGgoAAAA
NS
MgAAADICAYAAACt...” UhEU
canvas image](https://image.slidesharecdn.com/canvas-111218134846-phpapp01/85/HTML5-Canvas-Let-s-Draw-25-320.jpg)
HTML5 Canvas - Let's Draw!
- 1. HTML5 Canvas
- 5. The canvas is a 2d bitmap.
- 6. No layers. No undo. No objects. No moving stuff.
- 9. How can I create a c anvas?
- 10. HTML <canvas id="a">fallback txt</canvas> JavaScript var canvas = document.getElementsById('a'); var ctx = canvas.getContext('2d');
- 11. I draw s quares.
- 12. con text ctx.fillStyle = 'blue'; he ight ctx.fillRect(0, 0, 150, 50); x y width ctx.strokeStyle = '#c66'; ctx.lineWidth = 1; ctx.strokeRect(0.5, 60.5, 150, 50);
- 13. Iwant to d raw an image!
- 14. create image var img = new Image(); img.onload = function() { w hen loaded ctx.drawImage(img, 0, 0); }; x y img.src = 'nakedrobot.png'; image url
- 15. how can you draw text?
- 16. css p roperties ctx.font = 'bold 40px sans-serif'; ctx.fillText('hello kitty', 5, 40); x y hello kitty
- 18. var w = canvas.width; var h = canvas.height; new image array var img = ctx.createImageData(w, h); for (var x = 0; x < w; x++) { for (var y = 0; y < h; y++) { // each pixel has four values var idx = (x + y * w) * 4; // 0 red, 1 green, 2 blue, 3 alpha img.data[idx + 0] = x; img.data[idx + 1] = 255-x; img.data[idx + 2] = 0; img.data[idx + 3] = 255; } } result ctx.putImageData(img, 0, 0); write to canv as
- 21. A nimation function ti ck() { doKeyboard( ); updatePlaye r(); doAI(); draw(); audio(); } var fps = 3 0; setInterval (tick, 1000 /fps) ;
- 22. get input draw update every 30ms
- 23. function tick() { doKeyboard(); updatePlayer(); doAI(); draw(); audio(); } var fps = 30; setInterval(tick, 1000/fps);
- 24. How can i Save an Image?
- 25. var img = document. getElementsByTagName('img')[0]; var canvasImg = canvas.toDataURL("image/png"); returns “data:ima ge/png;base64, img.src = canvasImg; iVBORw0KGgoAAAA NS MgAAADICAYAAACt...” UhEU canvas image
- 26. Browser Support 67%
- 29. Summary Canvas <canvas> is a new 2d bitmap html element. you can draw primitives, images and pixels. There are no layers or object. If a pixel gets a new color, the old color is overwritten and lost. A canvas is not “sandboxed” like flash and can be accessed and drawn on with javascript.
- 30. Material Used Banksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/ Banksy “Flowing off” http://www.flickr.com/photos/loungerie/4109420324/ Banksy “They’re Coming” http://www.flickr.com/photos/97041449@N00/4115205218/ Bansky “Tourqay Robot” http://en.wikipedia.org/wiki/File:Banksy_Torquay_robot_crop.jpg Banksy “You have got to be kidding me” http://www.banksy.co.uk/ Banksy “follow your Dream” http://www.flickr.com/photos/thomashawk/6343586111/ Banksy “nola” http://www.flickr.com/photos/eddiedangerous/3045255243/ Banksy “Flower Pollard Street” http://www.flickr.com/photos/eddiedangerous/1800573742/ Banksy “what are you looking at?” http://www.flickr.com/photos/nolifebeforecoffee/124659356/ Banksy “Man and Picture of a dog” http://www.flickr.com/photos/atomicshed/141462789/ Banksy “Anti-Capitalism for sale” http://www.flickr.com/photos/jcodysimms/246024687/
- 31. Material Used 3d teapot model http://resumbrae.com/ub/dms423_f08/10/ Metal Teapot http://www.flickr.com/photos/11273631@N08/2867342497/ furry teapot http://www.flickr.com/photos/11273631@N08/2867342461/ Television Icon http://thenounproject.com/noun/television/#icon-No416 Graphics Card http://www.flickr.com/photos/43779660@N00/218093887/ Banksy “under the Carpet” http://www.flickr.com/photos/acb/147223287/ Boxing http://www.flickr.com/photos/51035655711@N01/2826228569/