Canvas
-
Upload
dmitry-baranovskiy -
Category
Technology
-
view
20.600 -
download
1
description
Transcript of Canvas
![Page 1: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/1.jpg)
CanvasWeb Directions South 2009Dmitry Baranovskiy
HTML5 FTW!
![Page 2: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/2.jpg)
“The canvas element represents a!resolution-dependent bitmap canvas, which can be used for
rendering graphs, game graphics, or other visual images on the fly”
HTML 5 Specification
![Page 3: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/3.jpg)
![Page 4: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/4.jpg)
Teenager of web
technologies
![Page 5: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/5.jpg)
![Page 6: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/6.jpg)
![Page 7: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/7.jpg)
Awesome!What is
Awesome?
![Page 8: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/8.jpg)
![Page 9: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/9.jpg)
Draw!You can draw!
![Page 10: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/10.jpg)
apiAPI is small & simple
![Page 11: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/11.jpg)
HTML5HTML 5
![Page 12: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/12.jpg)
HTML5HTML5
![Page 13: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/13.jpg)
![Page 14: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/14.jpg)
![Page 15: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/15.jpg)
![Page 16: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/16.jpg)
Howto?How to…
![Page 17: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/17.jpg)
![Page 18: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/18.jpg)
JavaScript
![Page 19: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/19.jpg)
ContextContext
![Page 20: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/20.jpg)
var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
![Page 21: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/21.jpg)
context.save();context.restore();context.scale(x, y);context.rotate(angle);context.translate(x, y);context.transform(m11, m12, m21, m22, dx, dy);context.setTransform(m11, m12, m21, m22, dx, dy);
![Page 22: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/22.jpg)
var a = context.globalAlpha;
context.globalAlpha = a * 0.5;
var b = context.globalCompositeOperation;
context.globalCompositeOperation = "xor";
![Page 23: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/23.jpg)
context.strokeStyle = "#fc0";context.fillStyle = "#000";
var gradient = context.createLinearGradient(x1, y1, x2, y2);// orvar gradient = context.createRadialGradient(x1, y1, r1, x2, y2, r2);gradient.addColorStop(0 / 6, "red");gradient.addColorStop(1 / 6, "orange");gradient.addColorStop(2 / 6, "yellow");gradient.addColorStop(3 / 6, "green");gradient.addColorStop(4 / 6, "blue");gradient.addColorStop(5 / 6, "navy");gradient.addColorStop(6 / 6, "purple");context.fillStyle = gradient;
![Page 24: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/24.jpg)
context.lineWidth = 2;
context.lineCap = "round";
context.lineJoin = "bevel";
context.miterLimit = 5;
context.shadowColor = "#000";
context.shadowOffsetX = 0;
context.shadowOffsetY = 3;
context.shadowBlur = 7;
![Page 25: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/25.jpg)
primitivePrimitives
![Page 26: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/26.jpg)
context.clearRect(x, y, width, height);context.fillRect(x, y, width, height);context.strokeRect(x, y, width, height);
![Page 27: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/27.jpg)
pathsPaths
![Page 28: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/28.jpg)
context.beginPath();context.closePath();
context.moveTo(x, y);context.lineTo(x, y);context.quadraticCurveTo(cpx, cpy, x, y);context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);context.arcTo(x1, y1, x2, y2, radius);context.arc(x, y, radius, startAngle, endAngle, anticlockwise);context.rect(x, y, width, height);
context.fill();context.stroke();context.clip();context.isPointInPath(x, y);
![Page 29: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/29.jpg)
textText
![Page 30: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/30.jpg)
context.font = 'italic 400 12px/2 Palatino, »
Georgia, serif';
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("Web Directions", 100, 120);
context.strokeText("Canvas FTW", 100, 150, 140);
var metrics = context.measureText("How wide is »
this text?"),
width = metrics.width;
![Page 31: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/31.jpg)
imagesImages
![Page 32: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/32.jpg)
var image = new Image;
image.onload = function () {
context.drawImage(image, x, y);
// or
context.drawImage(image, x, y, w, h);
// or
context.drawImage(image, sx, sy, sw, sh,
x, y, w, h);
};
image.src = "graffiti.jpg";
![Page 33: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/33.jpg)
var image = new Image;
image.onload = function () {
context.drawImage(image, x, y);
// or
context.drawImage(image, x, y, w, h);
// or
context.drawImage(image, sx, sy, sw, sh,
x, y, w, h);
};
image.src = "graffiti.jpg";
sx
sy
sh
sw
x
y
h
w
![Page 34: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/34.jpg)
pixelsPixel Pushing
![Page 35: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/35.jpg)
var data = context.createImageData(w, h);
// or
var data = context.createImageData(old_data);
var data = context.getImageData(x, y, w, h);
context.putImageData(data, dx, dy);
// or
context.putImageData(data, dx, dy, x, y, w, h);
![Page 36: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/36.jpg)
var data = {
width: 100,
height: 100,
data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};
![Page 37: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/37.jpg)
var data = {
width: 100,
height: 100,
data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};
![Page 38: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/38.jpg)
var data = {
width: 100,
height: 100,
data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};
R G B A
![Page 39: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/39.jpg)
not!What is not Awesome?
![Page 40: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/40.jpg)
![Page 41: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/41.jpg)
uglyAPI is ugly
![Page 42: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/42.jpg)
1by1Setting attributes one by one
![Page 43: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/43.jpg)
context.lineWidth = 2;
context.lineCap = "round";
context.lineJoin = "bevel";
context.miterLimit = 5;
context.shadowColor = "#000";
context.shadowOffsetX = 0;
context.shadowOffsetY = 3;
context.shadowBlur = 7;
![Page 44: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/44.jpg)
context.setAttr({
lineWidth: 2,
lineCap: "round",
lineJoin: "bevel",
miterLimit: 5,
shadowColor: "#000",
shadowOffsetX: 0,
shadowOffsetY: 3,
shadowBlur: 7
});
![Page 45: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/45.jpg)
pain!Coding paths is painful
![Page 46: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/46.jpg)
context.beginPath();context.moveTo(x, y);context.lineTo(x, y);context.quadraticCurveTo(cpx, cpy, x, y);context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);context.arcTo(x1, y1, x2, y2, radius);context.arc(x, y, radius, startAngle, endAngle, anticlockwise);context.rect(x, y, width, height);context.closePath();context.fill();
![Page 47: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/47.jpg)
context.beginPath() .moveTo(x, y) .lineTo(x, y) .quadraticCurveTo(cpx, cpy, x, y) .bezierCurveTo(c1x, c1y, c2x, c2y, x, y) .arcTo(x1, y1, x2, y2, radius) .arc(x, y, radius, startAngle, endAngle, anticlockwise) .rect(x, y, width, height) .closePath() .fill();
![Page 48: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/48.jpg)
var path = ["move", x, y,
"line", x, y,
"quadratic", cpx, cpy, x, y,
"arc", x, y, radius, startAngle,
endAngle, anticlockwise];
context.path(path).close().fill();
context.path(["move", 10, 10, "line", 50,
50]).close().fill();
![Page 49: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/49.jpg)
no wayNo way to store path
![Page 50: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/50.jpg)
more!Not enough primitives
![Page 51: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/51.jpg)
![Page 52: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/52.jpg)
![Page 53: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/53.jpg)
supportBad support
![Page 54: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/54.jpg)
![Page 55: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/55.jpg)
89%
![Page 56: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/56.jpg)
81%
![Page 57: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/57.jpg)
76%
![Page 58: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/58.jpg)
74%
![Page 59: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/59.jpg)
Zero
![Page 60: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/60.jpg)
HTML 5
![Page 61: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/61.jpg)
![Page 63: Canvas](https://reader038.fdocuments.in/reader038/viewer/2022110115/54c810e34a79598e698b459b/html5/thumbnails/63.jpg)
Thank You
Photos used in this presentation:http://www.flickr.com/photos/garryknight/2390411392/http://www.flickr.com/photos/livenature/233281535/http://www.flickr.com/photos/yoadolescente/3212368604/http://www.flickr.com/photos/andreassolberg/433734311/http://www.flickr.com/photos/cassidy/67331975/http://www.flickr.com/photos/b-tal/93425807/http://www.flickr.com/photos/pefectfutures/163853250/http://www.flickr.com/photos/streetart-berlin/3746020273/http://www.flickr.com/photos/streetart-berlin/3954856553/http://www.flickr.com/photos/streetart-berlin/3947360186/http://www.flickr.com/photos/streetart-berlin/3949549099/http://www.flickr.com/photos/streetart-berlin/3949546871/http://www.flickr.com/photos/streetart-berlin/3926942710/http://www.flickr.com/photos/streetart-berlin/3834021290/