More Related Content Similar to Canvas - The Cure (20) More from Robert Nyman (20) Canvas - The Cure9. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");
context.fillStyle = "#f00";
context.fillRect(0, 0, 100, 100);
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();
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";
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);
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);
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