1. Neal Stublen nstublen@jccc.edu

4. Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels  Use a element in your HTML  Supply an “id” attribute to access the element from JavaScript

5. Canvas Coordinate System  Upper-left corner at (0, 0)  Lower right at (width, height)

6. Filling a Rectangle $('document').ready(function() { var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.fillRect(10, 10, 100, 100); context.strokeStyle = 'red'; context.strokeRect(10, 10, 100, 100); });

7. Filling with an Image $('document').ready(function() { var img = new Image(); img.src = ‘./images/bg-bike.png’; img.onload = function() { pattern = context.createPattern(img, 'repeat'); context.fillStyle = pattern; context.fillRect(10, 10, 100, 100); context.strokeRect(10, 10, 100, 100); }; });

8. Filling with a Gradient $('document').ready(function() { var gradient = context.createLinearGradient(0, 0, 0, 200); gradient.addColorStop(0, 'blue'); gradient.addColorStop(1, 'white'); context.fillStyle = gradient; context.fillRect(10, 10, 100, 100); context.strokeRect(10, 10, 100, 100) });

9. Drawing with Paths  We’ve seen drawing rectangles  We can draw other shapes, but we need to define a “path” for the shape

10. Drawing with Paths $('document').ready(function() { context.beginPath(); context.arc(50, 50, 30, 0, Math.PI * 2, true); context.closePath(); context.strokeStyle = 'red'; context.fillStyle = 'blue'; context.lineWidth = 3; context.fill(); context.stroke(); };

11. Experiment  Experiment inside the browser http://www.html5canvastutorials.com/

12. Manipulating Pixels var image = document.getElementById('myimage'); context.drawImage(image, (canvas.width - image.width) / 2, (canvas.height - image.height) / 2);

13. Manipulating Pixels var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var pixelData = imageData.data; for (var i = 0; i < pixelData.length; i += 4) { var r = pixelData[i]; var g = pixelData[i+1]; var b = pixelData[i+2]; var gray = r * 0.3 + g * 0.59 + b * 0.11; pixelData[i] = gray; pixelData[i+1] = gray; pixelData[i+2] = gray; } context.putImageData(imageData, 0, 0);

14. Displaying Text context.textAlign = 'left'; context.font = '18px LeagueGothic'; context.fillText('Hello!');

16. Scalable Vector Graphics  Describe vector graphics using XML  Preserves shape when size changes  Performs many tasks similar to canvas Gradients, paths, shapes, text  XML descriptions instead of JavaScript

17. An SVG Circle <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 400”>

18. An SVG Rectangle <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 400"> <rect x="10" y="10" width="100" height="100" fill="blue" stroke="red" stroke-width="3" />

19. SVG Complexities  SVG drawings can become very complex  Inkscape – Free vector graphics editor http://www.inkscape.org  Raphael – JavaScript library for working with SVG http://raphaeljs.com

20. Why SVG?  SVG can provide a much smaller description of an image (smaller files) Rather than describing the RGBA values of each pixel, it can describe lines and shapes regardless of size  Scaling doesn’t produce artifacts No jagged edges

21. Canvas or SVG?  Canvas provides pixel manipulation  Canvas provides saving images to PNG and JPEG files  SVG provides DOM access to drawing elements  SVG has more tools

23. Steps to Drag and Drop  Set the draggable attribute on any elements you want to be draggable  Set an event listener for the dragstart event on any draggable elements  Set an event listener for the dragover and drop events on any elements that can accept draggable elements

24. Set Draggable  Set the draggable attribute on an element  This is not a boolean attribute

25. Watch for dragstart $('.src').bind('dragstart', function(event) { event.originalEvent.dataTransfer.setData('text/plain', event.target.getAttribute('id')); });

26. Watch for dragover $(‘.tgt').bind('dragover', function(event) { event.preventDefault(); });

27. Watch for drop $(‘.tgt').bind('drop', function(event) { var src = event.originalEvent.dataTransfer.getData("text/plain"); });

28. Cat and Mouse  HTML Herald supports drag and drop at the cat article Drag the mice onto the cat

29. Draggable Divs  Create a series of colored div elements that can be dragged onto other divs to change their color  Swap position of colored divs by dragging them onto one another