Canvas - The Cure
ā¢
0 likesā¢2,450 views
An introduction to the HTML5 canvas element and what you can do with it. The key is using it all together in the demo at the end
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Canvas - The Cure
Similar to Canvas - The Cure (20)
More from Robert Nyman
More from Robert Nyman (20)
Recently uploaded
Recently uploaded (20)
Canvas - The Cure
- 1. The Cure
- 5. Canvas
- 6. Apple even creates open standards for the web -Steve Jobs
- 8. <canvas id="my-canvas" width="700" height="600"> I am canvas </canvas>
- 9. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 11. context.save(); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore();
- 13. context.fillRect(350, 50, 100, 100); context.lineWidth = "10"; context.lineJoin = "round"; context.moveTo(50, 50); context.lineTo(200, 200); context.lineTo(100, 300); context.closePath(); context.stroke(); context.fill();
- 15. context.beginPath(); context.strokeStyle = "#00f"; context.arc(200, 400, 75, 0, Math.PI*2, false); context.stroke();
- 17. context.fillStyle = "#f00"; context.bezierCurveTo(100, 100, 10, 10, 250, 30); context.fill();
- 19. var gradient = context.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, "#f00"); gradient.addColorStop(1, "#ffffa2"); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height);
- 21. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context.drawImage(img, 0, 0, 600, 200); }, false); img.setAttribute("src", "view.jpg");
- 22. var patternImg = document.createElement("img"); patternImg.onload = function () { context.strokeStyle = context.createPattern(this, "repeat"); context.stroke(); }; patternImg.src = "view-small.jpg";
- 25. context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 27. context.strokeStyle = "transparent"; context.arc(100, 100, 75, 0, Math.PI*2, false); context.clip(); context.stroke(); context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 30. context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.save(); context.translate(200, 200); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(0, 0, 100, 100); context.restore(); context.fillRect(0, 200, 100, 100);
- 33. context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.save(); context.translate(200, 200); context.scale(2, 2); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(0, 0, 100, 100); context.restore(); context.fillRect(0, 200, 100, 100);
- 36. context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.save(); context.translate(200, 200); context.rotate(0.23); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(0, 0, 100, 100); context.restore(); context.fillRect(0, 200, 100, 100);
- 39. context.fillStyle = "#000"; context.font = "16px Helvetica Neue"; context.fillText("I am text on canvas - how cool is that?", 200, 250);
- 40. context.fillStyle = "#000"; context.font = "16px Helvetica Neue"; context.shadowColor = "rgba(100, 100, 100, 0.5)"; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.fillText("I am text on canvas - how cool is that?", 200, 250);
- 43. // Image for loading var img = document.createElement("img"), img.addEventListener("load", function () { context.drawImage(img, 0, 0); }, false);
- 44. // To enable drag and drop canvas.addEventListener("dragover", function (evt) { evt.preventDefault(); }, false); // Handle dropped image file - only Firefox and Google Chrome canvas.addEventListener("drop", function (evt) { var files = evt.dataTransfer.files; if (files.length > 0) { var file = files[0]; if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { var reader = new FileReader(); // Note: addEventListener doesn't work in Google Chrome for this event reader.onload = function (evt) { img.src = evt.target.result; }; reader.readAsDataURL(file); } } evt.preventDefault(); }, false);
- 46. var mouseDown = false, brushColor = "rgb(0, 0, 0)"; // Detect mousedown canvas.addEventListener("mousedown", function (evt) { mouseDown = true; context.beginPath(); }, false); // Detect mouseup canvas.addEventListener("mouseup", function (evt) { mouseDown = false; var colors = context.getImageData(evt.layerX, evt.layerY, 1, 1).data; brushColor = "rgb(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ")"; }, false); // Draw, if mouse button is pressed canvas.addEventListener("mousemove", function (evt) { if (mouseDown) { context.strokeStyle = brushColor; context.lineWidth = 20; context.lineJoin = "round"; context.lineTo(evt.layerX+1, evt.layerY+1); context.stroke(); } }, false);
- 50. ???
- 51. The Cure - Demo
- 52. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 53. Robert Nyman http://robertnyman.com/ Twitter: @robertnyman Pictures: The Cure: http://www.amoeba.com/blog/2007/07/pen-is-mightier-than-the-sword/new-siouxsie-video-into-a-swan.html Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/ Sticky tape: http://damncoolpics.blogspot.com/2011/02/funny-graphs-and-charts.html Canvas: http://www.ioffer.com/c/Drawings-1000407 Wash machine: http://www.mymodernmet.com/proļ¬les/blogs/a-father-who-creatively Clip: http://pics33.blogspot.com/2010/08/best-examples-of-creative-edit-images.html Lost in translation: http://www.impawards.com/2003/lost_in_translation_ver2.html Coffe machine: http://www.mymodernmet.com/proļ¬les/blogs/a-father-who-creatively Throwing: http://pics33.blogspot.com/2010/08/best-examples-of-creative-edit-images.html Text: http://www.identifont.com/show?3OI Drag me: http://www.stardusttrailers.com/scheda_wallpaper.php?id=17261&titolo=Drag%20Me%20to%20Hell Drawing: http://www.mathacademy.com/pr/minitext/escher/big.asp?image=drawing_hands Protect painting: http://yellowpagescoupons.net/protect-painting-200-licensed-experienced-professional-detailed-prep-painters-sf-east-bay-area-ca-yellow-pages-coupons/ Calvin & Hobbes:http://www.fanpop.com/spots/calvin-and-hobbes/images/1395524/title/calvin-hobbes-hugging-wallpaper