HTML5 and CSS3 – The Future of the Web Programming

HTML5 Canvas
Sergio Luján Mora

1

HTML5 & CSS3 Content • Canvas • Canvas reference HTML5 & CSS3 CANVAS 2 .

fills. JavaScript) must be used to actually draw the graphics • Every pixel in the canvas can be controlled HTML5 & CSS3 Canvas • Canvas element: <canvas></canvas> • Attributes: – height – width 3 . a script (e. images. text.HTML5 & CSS3 Canvas • The canvas element provides an API for twodimensional drawing—lines..g. and so on • The canvas is only a container for graphics.

50). 50. </script> <body> <canvas></canvas> </body> </html> & CSS3 HTML5 & CSS3 4 . 50. 50).querySelector("canvas").<!DOCTYPE html> HTML5 <html> <head> <meta charset="utf-8" /> <title>Canvas example</title> <script> function draw() { var ctx = document. } window. 100.onload = draw. // Second square ctx.fillRect(100. // First square ctx.fillRect(10.getContext("2d"). 10.

Please.canvas&gt. downdload and use one of the following browsers: </p> <ul> <li>Google Chrome</li> <li>Mozilla Firefox</li> <li>Opera</li> </ul> </canvas> 5 .HTML5 & CSS3 Canvas • Any text inside the <canvas> element will be displayed in browsers that does not support <canvas> HTML5 & CSS3 <canvas> <p> Your browser doesn't support &lt. element.

circles. width.getContext("2d").HTML5 & CSS3 Canvas • document. y.querySelector("canvas" ). • fillRect(x. etc. boxes. – It gets the 2D context to allow you to draw – It provides methods to draw lines. height) – Draws a filled rectangle using the color/style of the fillStyle attribute – The x and y coordinates start in the top left HTML5 & CSS3 Canvas • Exercise: – Create the following pattern 6 .

HTML5 & CSS3 HTML5 & CSS3 Canvas • Exercise: – Create the following pattern 7 .

ctx. 50). ctx. 0)".strokeRect(9.HTML5 & CSS3 HTML5 & CSS3 // Creates a solid square ctx.fillStyle = "rgb(0. 52.strokeStyle = "rgb(0. 255. 52). 0)". // Draws an outline ctx. ctx. 8 .fillRect(10. 50. 182.lineWidth = 5. 9. 10.

PI*2.lineTo(175.6)".getElementById('example'). 100). 25.50). context.fillStyle = "rgb(0.HTML5 & CSS3 HTML5 & CSS3 var canvas = document.beginPath().50. context. context.getContext('2d'). context. context.0. context.arc(125.100.fill().fillStyle = "rgba(255. context.lineTo(225. 9 . 0.150).6)".100). context. 100.0.moveTo(125.fill().255.true).Math.0.255.0.0.beginPath(). context.fillRect (25. context.0)". var context = canvas. context.fillStyle = "rgba(0. context.

height.createElement("img").height = img.canvas.jpg". 10 .src = "sergio.getContext("2d"). }.width = img. ctx.width. ctx. 0.drawImage(img. 0).onload = function () { ctx.querySelector("canvas").HTML5 & CSS3 HTML5 & CSS3 var ctx = document. img. var img = document. // wait until the image has loaded img.canvas.

0).height). 11 . // Green pixels.length. 0.pixels.getImageData(0. n = pixels. // Blue pixels.HTML5 & CSS3 HTML5 & CSS3 // Transformation var pixels = ctx.putImageData(pixels.pixels. img. i < n.data[i+0] = 255 . i += 4) { // Red pixels. for(var i = 0.width.data[i+2] = 255 .data[i+1] = 255 .data[i+0].data[i+2]. img. 0.data[i+1].data. } ctx.pixels.

0. 0). n = pixels. pixels.getImageData(0. for(var i = 0.data. 12 .putImageData(pixels. img.HTML5 & CSS3 HTML5 & CSS3 // Transformation var pixels = ctx. i += 4) { total = (255 . img.data[i+1] + 255 . i < n.width. pixels. 0. } ctx.pixels.data[i+0] + 255 . pixels.data[i+0] = total.height).pixels.data[i+2]) / 3.length.data[i+2] = total.pixels.data[i+1] = total.

html5.HTML5 & CSS3 CANVAS REFERENCE HTML5 & CSS3 Canvas reference • http://simon.org/dump/html5canvas-cheat-sheet.html 13 .

HTML5 & CSS3 Color and styles • fillStyle = color|style – The fill-color of the drawing • strokeStyle = color|style – The stroke-color of the drawing • lineWidth = number – The width of the drawing stroke HTML5 & CSS3 Color and styles • shadowColor = color – The color of the shadow • shadowOffsetX = number – The horizontal distance of the shadow • shadowOffsetX = number – The horizontal distance of the shadow • shadowBlur = number – The size of the burring effect 14 .

y2. y) • lineTo(x. eAngle. x2. sAngle. w. y) HTML5 & CSS3 Path. curve. w.HTML5 & CSS3 Path. radius) 15 . y. circle. circle. h) • rect(x. and rectangle • fillRect(x. r. y. w. aClockwise) • arcTo(x1. h) • moveTo(x. and rectangle • arc(x. h) • strokeRect(x. w. h) • clearRect(x. curve. y. y. y. y1.

Sign up to vote on this title
UsefulNot useful