Skip to content
Browse files

Use Markdown. Add some examples from HTML 5 Canvas Deep Dive.

  • Loading branch information...
1 parent 4142ae8 commit 47490086a679fd816cbd2dc74d9f696c5922d589 @wtaysom committed
Showing with 100 additions and 6 deletions.
  1. BIN baby_original.png
  2. +80 −0 more-shapes.js
  3. +20 −6 notes.md
  4. BIN smile.png
View
BIN baby_original.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
80 more-shapes.js
@@ -0,0 +1,80 @@
+var canvas = document.getElementById('canvas');
+var c = canvas.getContext('2d');
+
+// Triangle
+c.fillStyle = "#ccddff";
+c.beginPath();
+c.moveTo(100,100);
+c.lineTo(400,50);
+c.lineTo(400,300);
+c.closePath();
+c.fill();
+c.strokeStyle = "rgb(0,128,0)";
+c.lineWidth = 5.0;
+c.stroke();
+
+// Gradient
+var grad = c.createLinearGradient(0,0,200,200);
+grad.addColorStop(0, "white");
+grad.addColorStop(1, "black");
+c.fillStyle = grad;
+c.fillRect(0,0,400,300);
+
+// Image
+var img = new Image();
+img.onload = function() {
+ var pat = c.createPattern(img,'repeat');
+ c.fillStyle = pat;
+ c.fillRect(10,10,100,100);
+
+ var pat2 = c.createPattern(img,'repeat-y');
+ c.fillStyle = pat2;
+ c.fillRect(10,150,100,100);
+
+}
+img.src = 'smile.png';
+
+// Opacity
+c.fillStyle = "red";
+c.fillRect(100,100,400,300);
+c.globalAlpha = 0.5;
+c.fillStyle = "white";
+c.fillRect(100,100,400,300);
+c.globalAlpha = 1.0;
+
+// Paths
+c.fillStyle = "red";
+
+c.beginPath();
+c.moveTo(10,100);
+c.bezierCurveTo(20,200, 500,200, 500,100);
+c.lineTo(500,300);
+c.lineTo(10,300);
+c.closePath();
+c.fill();
+
+c.lineWidth = 4;
+c.strokeStyle = "black";
+c.stroke();
+
+// Pixel Adjustment
+// python -m SimpleHTTPServer
+var img = new Image();
+img.onload = function() {
+ //draw the image to the canvas
+ c.drawImage(img,0,0);
+ //get the canvas data
+ var data = c.getImageData(0,0,canvas.width,canvas.height);
+ //invert each pixel
+ for(n=0; n<data.width*data.height; n++) {
+ var index = n*4;
+ data.data[index] = 255-data.data[index];
+ data.data[index+1] = 255-data.data[index];
+ data.data[index+2] = 255-data.data[index];
+ //don't touch the alpha
+ }
+
+ //set the data back
+ c.putImageData(data,0,0);
+}
+img.src = "baby_original.png";
View
26 notes.md
@@ -18,31 +18,45 @@
4. Links
* [Validate HTML](http://validator.w3.org/)
-# Tools
+## Tools
* [Sublime Text 2](http://www.sublimetext.com/2)
+* [SubEthaEdit](http://www.codingmonkeys.de/subethaedit/)
+* [Google Chrome Developer Tools](http://code.google.com/chrome/devtools/docs/overview.html)
* [Firefox Aurora](http://www.mozilla.org/en-US/firefox/aurora/)
-# Tutorials
+## Tutorials
* [HTML 5 Canvas Deep Dive](http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html)
* [Dive into HTML5 canvas](http://diveintohtml5.info/canvas.html)
* [Mozilla Canvas Tutorial](https://developer.mozilla.org/en/Canvas_tutorial)
+* For manipulating pixels `python -m SimpleHTTPServer`.
-# Canvas Examples
+## Canvas Examples
* [21 Ridiculously Impressive Experiments](http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/)
* [Canvas Demos](http://www.canvasdemos.com/)
-# Canvas Reference
+## Canvas Reference
* [Cheat Sheet](http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html)
* [Mozilla Reference](https://developer.mozilla.org/en/DOM/HTMLCanvasElement)
* [WebKit Reference](https://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html)
* [W3C Reference](http://dev.w3.org/html5/2dcontext/)
-# Other
+## Other
* [Nobody wants to learn how to program.](http://inventwithpython.com/blog/2012/03/03/nobody-wants-to-learn-how-to-program/)
* [Little Programming Problems](http://coderbyte.com)
-* [7 Javascript Resources](http://accidentaltechnologist.com/javascript/7-resources-every-javascript-developer-should-know/)
+* [7 Javascript Resources](http://accidentaltechnologist.com/javascript/7-resources-every-javascript-developer-should-know/)
+
+# Saturday March 24
+
+## Assignment
+
+!!
+
+## Examples
+
+* [Fractal Machine](http://www.cs.utoronto.ca/~noam/fractal_machine.html)
+* [Snake](https://gaming.mozillalabs.com/games/25/snake)
View
BIN smile.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4749008

Please sign in to comment.
Something went wrong with that request. Please try again.