07 – HTML5 Canvas (1) Informatics Department Parahyangan Catholic University

 The canvas element is mainly used for manipulating 2d graphics, or create them from scratch  It can…  create dynamic graphics and animations that react to user interaction (e.g., games)  data visualizations and graphs based on data in a HTML table, which updates on the fly.  construct a UI for a Web application  etc.

 Creating a blank canvas element with 500px width and 500px height  fallback content is shown when the browser doesn’t support canvas element The position of the canvas element is defined by its location within your HTML document. It can be moved around with CSS as required, just like other HTML elements.

 The purpose of the canvas element is to act as a wrapper around the 2d rendering context  It provides methods for manipulating 2d graphics  We actually draw on the 2d rendering context

 Uses flat Cartesian coordinate system with the origin (0, 0) at the top left

 Preparing the canvas: $(document).ready(function() { }); Drawing scripts written here

 Accessing the 2d rendering context using JS  Pure JS  JQuery var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

 Drawing a Rectangle  the first two parameters are x and y coordinates for the top left corner  the last two parameters are width and height  default color is black (can be changed) context.fillRect(40, 40, 100, 100); context.strokeRect(40, 40, 100, 100); RESULT:

 Drawing a Line  They’re actually known as paths context.beginPath(); // Start the path context.moveTo(40, 40); // Set the path origin context.lineTo(340, 40); // Set the path destination context.closePath(); // Close the path context.stroke(); // Outline the path

 Drawing a Circle  there isn’t actually a special method in canvas to create a circle  there is is a method for drawing arcs context.beginPath(); // Start the path // Draw a circle context.arc(230, 90, 50, 0, Math.PI*2, false); context.closePath(); // Close the path context.fill(); // Fill the path SYNTAX: context.arc(x, y, radius, startAngle, endAngle, anticlockwise); SYNTAX: context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

 Drawing an Arc

 Angles in canvas are in radians  Converting degrees  radians:  Or just use radians: var degrees = 1; // 1 degree var radians = degrees * (Math.PI / 180); // radians

 The fillStyle property of the 2d rendering context is the color that shapes and paths are filled in as. context.fillStyle = "rgb(255, 0, 0)"; context.fillRect(40, 40, 100, 100); // Red square context.fillRect(180, 40, 100, 100); // Red square context.fillStyle = "rgb(0, 0, 0)"; context.fillRect(320, 40, 100, 100); // Black square RESULT:

 The strokeStyle property of the 2d rendering context is the color that shapes and paths are drawn as. context.strokeStyle = "rgb(255, 0, 0)"; context.strokeRect(40, 40, 100, 100); // Red square context.strokeRect(180, 40, 100, 100); // Red square context.strokeStyle = "rgb(0, 0, 0)"; context.strokeRect(320, 40, 100, 100); // Black square RESULT:

 The lineWidth property of the 2d rendering context defines the thickness of the drawing line. context.lineWidth = 5; // Make lines thick context.strokeStyle = "rgb(255, 0, 0)"; context.beginPath(); context.moveTo(40, 180); context.lineTo(420, 180); // Red line context.closePath(); context.stroke(); context.lineWidth = 20; // Make lines even thicker context.strokeStyle = "rgb(0, 0, 0)"; context.beginPath(); context.moveTo(40, 220); context.lineTo(420, 220); // Black line context.closePath(); context.stroke(); RESULT:

 We can draw text inside a canvas using fillText method  It is a picture, thus not selectable  It can be manipulated as other pictures  Example:  default font size is 10px  default font is San-Serif var text = "Hello, World!"; context.fillText(text, 40, 40); Coordinate of bottom left corner of the text

 Changing text’s font and size:  Makes the font italic: context.font = "30px serif” context.font = "italic 30px serif"; RESULT:

 We also can create stroked text: var text = "Hello, World!"; context.font = "italic 60px serif"; context.strokeText(text, 40, 100); RESULT:

 Normal HTML element can be set to 100% width and 100% height. This doesn’t work with canvas element (100% is interpreted as 100px).  The easiest way to do it is to set the width and height of the canvas element precisely to the pixel width and height of the browser window.

 Example .attr() is JQuery method for changing an element’s attribute  innerWidth & innerHeight attributes are used instead of width and height, because the later are not working properly on all browsers var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); canvas.attr("width", $(window).get(0).innerWidth); canvas.attr("height", $(window).get(0).innerHeight); context.fillRect(0, 0, canvas.width(), canvas.height());

 This approach is not really working properly. We see white gap around the canvas, and there are scrollbars in the browser window RESULT:

 To fix this, we need to use some CSS * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } RESULT:

 Visit : canvas-example/ canvas-example/

 Foundation HTML5 Canvas: For Games and Entertainment 1st Edition  Author: Rob Hawkes