• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Canvas
 

Canvas

on

  • 24,763 views

Talk about Canvas at Web Directions South ’09

Talk about Canvas at Web Directions South ’09

Statistics

Views

Total Views
24,763
Views on SlideShare
16,025
Embed Views
8,738

Actions

Likes
36
Downloads
359
Comments
4

52 Embeds 8,738

http://ajaxian.com 5417
http://www.webdirections.org 2464
http://brenelz.com 204
http://disole.wordpress.com 134
http://www.jpkeisala.com 106
http://www.extjs.com 77
http://www.slideshare.net 72
http://swik.net 67
http://blogs.vinuthomas.com 61
http://tumblr.ignar.name 17
http://ignar.name 17
http://www.hanrss.com 12
http://feeds.feedburner.com 11
http://www.jordimir.com 9
resource://brief-content 7
http://blog.ignar.name 6
http://localhost 6
http://bootstrap.co.kr 4
http://translate.googleusercontent.com 4
http://127.0.0.1:8795 3
http://www.linkedin.com 3
http://webcache.googleusercontent.com 2
http://localhost:2453 2
http://192.168.6.52 2
https://www.linkedin.com 2
http://www.bootstrap.co.kr 2
http://www.brenelz.com 2
http://rss.mmckeon.com 1
http://www.stupiddog.eu 1
http://elhornonoestapabollos.blogspot.com 1
http://feed.bmaron.net 1
http://velidea.com 1
http://static.slideshare.net 1
http://translate.yandex.net 1
http://10.0.1.218 1
http://iskosalminen.com 1
http://www.rue89.com 1
http://www.svtestsite.com 1
http://extjs 1
file:// 1
http://demos.theactivegroup.com 1
http://www.ajaxian.com 1
http://127.0.0.1 1
applewebdata://2291BE42-A055-4C86-B201-FD0255D842DE 1
http://127.0.0.1:1108 1
http://www.webwag.com 1
http://www.mirpod.com 1
http://transfer 1
applewebdata://4F121044-5FCD-4788-9836-93D363709ED4 1
http://to.test 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great Presentation!
    Just add to my favourited.

    --
    http://buynshopping.com
    Are you sure you want to
    Your message goes here
    Processing…
  • You could always create a jQuery plugin/wrapper that allows you to use the canvas API in the way described on slides 44 and 47.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great design, typography and use of photos in this presentation.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks Dmitry for an awesome presentation! Programmers and those who actually watched this presentation at WDS09 will know that you can't actually do what is in slides 44 and 47, but Dmitry reckons we should badger the W3C in to making it work that way. It's hard to disagree really.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Canvas Canvas Presentation Transcript

    • Canvas L5 FT W! H TMWeb Directions South 2009 Dmitry Barano vskiy
    • “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
    • Teenager of web technologies
    • Awesome What is Awesome? !
    • Draw!You can draw!
    • apiAPI is small & simple
    • HTML5 HTML 5
    • HTML5 HTML5
    • Howto? How to…
    • JavaScript
    • Context Context
    • var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
    • 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);
    • var a = context.globalAlpha;context.globalAlpha = a * 0.5;var b = context.globalCompositeOperation;context.globalCompositeOperation = "xor";
    • 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;
    • context.lineWidth = 2;context.lineCap = "round";context.lineJoin = "bevel";context.miterLimit = 5;context.shadowColor = "#000";context.shadowOffsetX = 0;context.shadowOffsetY = 3;context.shadowBlur = 7;
    • primiti Primitives ve
    • context.clearRect(x, y, width, height);context.fillRect(x, y, width, height);context.strokeRect(x, y, width, height);
    • paths Paths
    • 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);
    • text Text
    • 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;
    • images Images
    • 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";
    • sy yvar image = new Image;image.onload = sx function () { sh x h context.drawImage(image, x, y); // or sw w context.drawImage(image, x, y, w, h); // or context.drawImage(image, sx, sy, sw, sh, x, y, w, h);};image.src = "graffiti.jpg";
    • pixelsPixel Pushing
    • var data = context.createImageData(w, h);// orvar data = context.createImageData(old_data);var data = context.getImageData(x, y, w, h);context.putImageData(data, dx, dy);// orcontext.putImageData(data, dx, dy, x, y, w, h);
    • var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]};
    • var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]};
    • var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]}; R G B A
    • not!What is notAwesome?
    • uglyAPI is ugly
    • 1by1Setting attributes one by one
    • context.lineWidth = 2;context.lineCap = "round";context.lineJoin = "bevel";context.miterLimit = 5;context.shadowColor = "#000";context.shadowOffsetX = 0;context.shadowOffsetY = 3;context.shadowBlur = 7;
    • context.setAttr({ lineWidth: 2, lineCap: "round", lineJoin: "bevel", miterLimit: 5, shadowColor: "#000", shadowOffsetX: 0, shadowOffsetY: 3, shadowBlur: 7});
    • pain!Coding paths is painful
    • 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();
    • 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();
    • 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();
    • no wayNo way to store path
    • more!Not enough primitives
    • support Bad support
    • 89%
    • 81%
    • 76%
    • 74%
    • Zero
    • HTML 5
    • Thank Youdmitry@baranovskiy.com
    • Thank YouPhotos 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/ dmitry@baranovskiy.com