HTML5 and CSS3

1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

2. Chapter 11Canvas, SVG, andDrag and Drop(JavaScript Ahead)

3. Canvas

4. Why Use a Canvas? • Flexibility… • Use of drawing primitives (lines, arcs, text) • Direct access to element display pixels • Use a <canvas> 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'); varcontext = 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() { varimg = 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() { vargradient = 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 varimage = document.getElementById('myimage'); context.drawImage(image, (canvas.width - image.width) / 2, (canvas.height - image.height) / 2);

13. Manipulating Pixels varimageData= context.getImageData(0, 0, canvas.width, canvas.height); varpixelData = imageData.data; for (vari = 0; i < pixelData.length; i += 4) { varr = pixelData[i]; varg = pixelData[i+1]; varb = pixelData[i+2]; vargray = 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!');

15. SVG

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 <svgxmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 400”> <circle cx="50" cy="50" r="25" fill="red“ /> </svg>

18. An SVG Rectangle <svgxmlns="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" /> </svg>

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

22. Drag and Drop

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 <div draggable="true"></div> • 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) { varsrc = 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. DraggableDivs • 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