32
Intro to HTML5 Canvas Juho Vepsäläinen

Intro to HTML5 Canvas

Embed Size (px)

DESCRIPTION

Brief introduction to HTML5 Canvas. Libs: https://github.com/bebraw/jswiki/wiki (multimedia, graphics). Demos: http://jsdo.it/bebraw/codes

Citation preview

Page 1: Intro to HTML5 Canvas

Intro to HTML5 CanvasJuho Vepsäläinen

Page 2: Intro to HTML5 Canvas

Gonna Talk About These Topics You Betcha

Canvas (Overview)

Canvas 2D Context (The Beefcake)

Canvas Tricks (For Fun and Profit)

Canvas Demos (To Recap Concepts Discussed)

Page 3: Intro to HTML5 Canvas

CanvasOverview

Page 4: Intro to HTML5 Canvas

http://dev.w3.org/html5/2dcontext/

Just Google it. :)

Page 5: Intro to HTML5 Canvas

Definition

Immediate-mode API and associated utility methods for drawing two-dimensional vector graphics

to a raster drawing area.

Draw and forget API and utils for 2D drawing.

Page 6: Intro to HTML5 Canvas

Markup

<canvas></canvas>

<canvas width="800" height="600"></canvas>

<canvas width="800" height="600">No canvas for you!</canvas>

Page 7: Intro to HTML5 Canvas

Element Access

Attributes: width, height

Method: getContext (for drawing), toDataURL (for saving)

Page 8: Intro to HTML5 Canvas

Show some apps and libs now.

Page 9: Intro to HTML5 Canvas

Canvas 2D ContextThe Beefcake

Page 10: Intro to HTML5 Canvas

Get Some Context

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

Page 11: Intro to HTML5 Canvas

Context Functionality

It's a state machine

Read-only ref back to canvas (attr)

save/restore + ops

Ops: transformations, compositing, colors and styles, line caps/joins, shadows, rects, paths, text, drawing images, pixel manipulation + misc. crud I won't cover

Page 12: Intro to HTML5 Canvas

Context for Dummies

1. Set some states (transformation, color, ie.)

2. Draw (lines, whatnot)

3. ???

4. Profit

Page 13: Intro to HTML5 Canvas

Default Context(0, 0) x

y

Page 14: Intro to HTML5 Canvas

Transformed Context(0, 0) x

y

ctx.scale(x, y)ctx.rotate(rad)ctx.translate(x, y)ctx.transform/setTransform(a,b,c,d,e,f) (set resets)

Page 15: Intro to HTML5 Canvas

Compositing

ctx.globalAlpha = 0.38;

ctx.globalCompositeOperation = "source-over";

Page 16: Intro to HTML5 Canvas

Colors and Styles - stroke/fill

ctx.strokeStyle = "black";

ctx.fillStyle = "yellow";

Page 17: Intro to HTML5 Canvas

Colors and Styles - Gradients

ctx.createLinearGradient(x0,y0,x1,y1)

ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)ctx.addColorStop(offset, color);

Page 18: Intro to HTML5 Canvas

Colors and Styles - Patternsctx.createPattern(catImg, 'repeat-x');

Page 19: Intro to HTML5 Canvas

Line Caps/Joins

ctx.lineWidth = 12;ctx.lineCap = "square";ctx.lineJoin = "miter";ctx.miterLimit = 10;

Page 20: Intro to HTML5 Canvas

Shadows

ctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.shadowBlur = 3;ctx.shadowColor = 'grey';

Page 21: Intro to HTML5 Canvas

Rectangles

ctx.clearRect/fillRect/strokeRect(x,y,w,h)

Page 22: Intro to HTML5 Canvas

Pathsctx.beginPath();

ctx.moveTo(x, y); // initial pos

// define curvectx.lineTo/quadraticCurveTo/bezierCurveTo/ arcTo/arc/rect...

ctx.closePath();

ctx.fill/stroke/clip();

Page 23: Intro to HTML5 Canvas

Text

ctx.font = "24px sans-serif";ctx.textAlign = "center";

ctx.fillText/strokeText(text,x,y,maxWidth);

Page 24: Intro to HTML5 Canvas

Drawing Imagesctx.drawImage(img/canvas/video, lots of alternatives);

Supports compositing! Use this to your advantage.

Page 25: Intro to HTML5 Canvas

Pixel Manipulation

Friggin' slow! Avoid if possible. Optimize usage.

var data = ctx.getImageData(0, 0, w, h);

var realData = data.data;for(var y = 0, pos = 0; y < h; y++) { for(var x = 0; x < w; x++, pos+=4) { realData[pos + 2] *= 0.5; // modify Blue channel }}data.data = realData;

ctx.createImageData/getImageData/putImageData

Page 26: Intro to HTML5 Canvas

Canvas TricksFor Fun and Profit

Page 27: Intro to HTML5 Canvas

Blurred Lines

Basic idea: Use line shadow, offset actual line so that it isn't visible.

Page 28: Intro to HTML5 Canvas

Multiple Layers

Basic idea: CSS z-index + absolute positioning.

Page 29: Intro to HTML5 Canvas

Erasing

Basic idea: Use destination-out compositing op.

Page 30: Intro to HTML5 Canvas

CSS Fun

Basic idea: Play around with CSS opacityand transformations (incurs perf penalty).

Page 31: Intro to HTML5 Canvas

Canvas DemosTo recap concepts discussed

Page 32: Intro to HTML5 Canvas

Demo time.