html5. the html5 specification was developed by the web hypertext application technology working...
TRANSCRIPT
HTML5
HTML5
• The HTML5 specification was developed by the Web Hypertext Application Technology Working Group (WHATWG), which was founded in 2004 by was founded by people from Apple, the Mozilla Foundation and Opera Software
• The group’s website is at http://www.whatwg.org/
• Their “living standard” for HTML5 is at http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html
HTML5 preliminaries• In HTML5, the DOCTYPE declaration has been simplified, to just
<!DOCTYPE HTML>• In HTML5, the character encoding declaration has been simplified,
to this type of format<meta charset=“…." />
Example:<meta charset="UTF-8" />
• So a simple HTML document looks like<!DOCTYPE HTML><html>
<head><meta charset="utf-8"><title>Example</title></head>
<body></body></html>
Drawing in HTML5
• HTML5 provides native support for drawing.• At present, only 2D drawing is supported• But 3D support is promised• Browser support for 2D drawing:
– Firefox: 3.0+ – IE: 9 – Chrome: 3.0+– Safari: 3.0+ – Opera: 10.0+ – iPhone: 1.0+ – Android: 1.0+ – BlackBerry: OS6.0
The <canvas> element
• HTML5 provides the new <canvas> element to specify the region where a drawing will be a produced
• The default size of the region is 300px by 150 px• To specify a different size, use the width and height
attributes, for example<canvas id="myCanvas" width="300" height="200">
</canvas>
• By default, a canvas has no border, but we can specify one:<canvas id="myCanvas" width="300" height="200“
style="border:solid 1px #ccc; " ></canvas>
Degrading gracefully
• Since not all browsers support the canvas element, let your page degrade gracefully by including content in the element which will be displayed by older browsers<canvas id="myCanvas" width="300" height="200“
style="border:solid 1px #ccc; " >
Your browser does not support the HTML5 canvas element
</canvas>
Degrading gracefully
• Firefox support the canvas but IE 8 does not
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Canvas example</title></head>
<body><canvas id="myCanvas" width="300"
height="200" style="border:solid 1px #ccc;">Your browser does not support the
canvas element</canvas></body></html>
Drawing in the canvas element
• All drawing in the canvas element is done using JavaScript
• First, the canvas element must be accessed:<canvas id="myCanvas" width="300" height="200">
Your browser does not support the HTML5 canvas element
</canvas>
<script type="text/JavaScript" language="JavaScript">
var canvas=document.getElementById('myCanvas');
…
</script>
Aside: the canvas interface• Source: http://www.w3.org/TR/html5/the-canvas-element.html
interface HTMLCanvasElement:
HTMLElement {
attribute unsigned long width;
attribute unsigned long height;
DOMString toDataURL(
in optional DOMString type, in any... args);
void toBlob(in FileCallback,
in optional DOMString type, in any... args);
object getContext(in DOMString contextId,
in any... args); };
Drawing in the canvas element (contd.)
• Having accessed the canvas, declare that you are drawing in 2D
• This is done by establishing a 2d “context”:<canvas id="myCanvas" width="300" height="200">
Your browser does not support the HTML5 canvas element
</canvas>
<script type="text/JavaScript" language="JavaScript">
var canvas=document.getElementById('myCanvas');
var context = canvas.getContext("2d");
…
</script>
Aside: 2d context interface• Source:
http://dev.w3.org/html5/2dcontext/#canvasrenderingcontext2d
• interface CanvasRenderingContext2D { // back-reference to the canvas readonly attribute HTMLCanvasElement canvas; // state void save(); // push state on state stack void restore(); // pop state stack and restore state // transformations (default transform is the identity matrix) void scale(double x, double y); void rotate(double angle); void translate(double x, double y); void transform(double a, double b, double c, double d, double e, double f); void setTransform(double a, double b, double c, double d, double e, double f); // compositing attribute double globalAlpha; // (default 1.0) attribute DOMString globalCompositeOperation; // (default source-over) // colors and styles attribute any strokeStyle; // (default black) attribute any fillStyle; // (default black) CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1); CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1); CanvasPattern createPattern(HTMLImageElement image, DOMString repetition); CanvasPattern createPattern(HTMLCanvasElement image, DOMString repetition); CanvasPattern createPattern(HTMLVideoElement image, DOMString repetition); // line caps/joins attribute double lineWidth; // (default 1) attribute DOMString lineCap; // "butt", "round", "square" (default "butt") attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter") attribute double miterLimit; // (default 10) // shadows attribute double shadowOffsetX; // (default 0) attribute double shadowOffsetY; // (default 0) attribute double shadowBlur; // (default 0) attribute DOMString shadowColor; // (default transparent black) // rects void clearRect(double x, double y, double w, double h); void fillRect(double x, double y, double w, double h); void strokeRect(double x, double y, double w, double h); // path API void beginPath(); void closePath(); void moveTo(double x, double y); void lineTo(double x, double y); void quadraticCurveTo(double cpx, double cpy, double x, double y); void bezierCurveTo(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y); void arcTo(double x1, double y1, double x2, double y2, double radius); void rect(double x, double y, double w, double h); void arc(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise); void fill(); void stroke(); void drawSystemFocusRing(Element element); boolean drawCustomFocusRing(Element element); void scrollPathIntoView(); void clip(); boolean isPointInPath(double x, double y); // text attribute DOMString font; // (default 10px sans-serif) attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start") attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic") void fillText(DOMString text, double x, double y, optional double maxWidth); void strokeText(DOMString text, double x, double y, optional double maxWidth); TextMetrics measureText(DOMString text); // drawing images void drawImage(HTMLImageElement image, double dx, double dy); void drawImage(HTMLImageElement image, double dx, double dy, double dw, double dh); void drawImage(HTMLImageElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh); void drawImage(HTMLCanvasElement image, double dx, double dy); void drawImage(HTMLCanvasElement image, double dx, double dy, double dw, double dh); void drawImage(HTMLCanvasElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh); void drawImage(HTMLVideoElement image, double dx, double dy); void drawImage(HTMLVideoElement image, double dx, double dy, double dw, double dh); void drawImage(HTMLVideoElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh); // pixel manipulation ImageData createImageData(double sw, double sh); ImageData createImageData(ImageData imagedata); ImageData getImageData(double sx, double sy, double sw, double sh); void putImageData(ImageData imagedata, double dx, double dy); void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight); };
The drawing API
• The drawing API supports both vector and bitmap graphics
• We will look at vector graphics first and, later, at bitmap graphics
Vector graphics in the drawing API
• The API uses a coordinate system in which– the units of length are pixels– The origin is at the top left corner of the canvas
• We draw something by – specifying a path and – then specifying either
• a stroke (to make the path visible), • a fill (to fill the area enclosed by path)• or both
Drawing a path
• To start a path, we use the beginPath() method
• Then, we use moveTo() to go to first point on the path
• Then we progress to subsequent points on the path by using a mixture of several methods, including lineTo(), quadraticCurveTo(), bezierCurveTo(), and arc().
• To close a path, we use closePath()
Example path• Here, we draw a simple, one-segment path from
(50,50) to (150,150)<!DOCTYPE HTML><html>
<head><meta charset="utf-8"><title>Canvas example</title></head>
<body><canvas id="myCanvas" width="300" height="200" style="border:solid 1px #ccc;">Your browser does not support the canvas element</canvas>
<script type="text/JavaScript" language="JavaScript">var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");
context.beginPath();context.moveTo(50,50);context.lineTo(150,150);</script></body></html>
Example path
• The path does not appear, because we did not give it a stroke
<script
…
context.beginPath();
context.moveTo(50,50);
context.lineTo(150,150);
</script>
Example path
• The path appears when we give it a stroke
<script
…
context.beginPath();
context.moveTo(50,50);
context.lineTo(150,150);
context.stroke();
</script>
A path with two straight-line segments
<script
…
context.beginPath();
context.moveTo(50,50);
context.lineTo(150,150);
context.lineTo(200,150);
context.stroke();
</script>
Closing a path
<script
…
context.beginPath();
context.moveTo(50,50);
context.lineTo(150,150);
context.lineTo(200,150);
context.closePath();
context.stroke();
</script>
Line width• The default line width is
1px but we can specify other values
<script
…
context.beginPath();
context.lineWidth=4;
context.moveTo(50,50);
context.lineTo(150,150);
context.lineTo(200,150);
context.closePath();
context.stroke();
</script>
Two paths with different line widths• The path appears when
we give it a stroke<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.stroke();context.beginPath();context.moveTo(150,150);context.lineWidth=8;context.lineTo(200,150);context.stroke();</script>
Line join style
• The default style of line join is the miter join
<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineTo(170,120);context.stroke();</script>
Line join style
• We can make the miter join explicit
<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineTo(170,120);context.lineJoin=“miter”;context.stroke();</script>
Line join style (contd.)
• The bevel join<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineTo(170,120);context.lineJoin=“bevel”;context.stroke();</script>
Line join style (contd.)
• The round join<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineTo(170,120);context.lineJoin=“round”;context.stroke();</script>
Line cap style
• By default, lines have butt endings
<script
…
context.beginPath();
context.lineWidth=4;
context.moveTo(50,50);
context.lineTo(150,150);
context.stroke();
</script>
Line cap style
• We can make the butt ending explicit
<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineCap=“butt”;context.stroke();</script>
Line cap style
• We can also have a round ending
<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineCap=“round”;context.stroke();</script>
Line cap style• We can also have a
square ending • In most cases, this looks
like a butt ending<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineCap=“square”;context.stroke();</script>
Reminder: a closed path
<script
…
context.beginPath();
context.moveTo(50,50);
context.lineTo(150,150);
context.lineTo(200,150);
context.closePath();
context.stroke();
</script>
Filling the area enclosed by the path
<script
…
context.beginPath();
context.moveTo(50,50);
context.lineTo(150,150);
context.lineTo(200,150);
context.closePath()
context.fill();
</script>
We can specify any colour for the fill
<script…context.beginPath();context.moveTo(50,50);context.lineTo(150,150);context.lineTo(200,150);context.closePath();context.fillStyle= “rgb(255,0,0)”;context.fill();</script>
Different ways of specifying colours
• Several ways of specifying colours are supported:– rgb(_,_,_) syntax, for example “rgb(255,0,0)”– Hexadecimal RGB syntax, for example “#FF0000”– for those colours which have standard names, for example
“red”
Fill and stroke
<script…context.beginPath();context.lineWidth=4;context.moveTo(50,50);context.lineTo(150,150);context.lineTo(200,150);context.closePath();context.fillStyle= “rgb(255,0,0)”;context.fill();context.stroke();</script>
Fill before stroke
• You should fill before stroking
• Otherwise, half the lineWidth of the stroke will be hidden by the subsequent fill
• In both scenes shown here, lineWidth=8
• In the first, we can see the full width, because fill preceded stroke
• In the second, fill came after stroke
Drawing with Bezier curves
• Bezier curves are used in vector graphics in order to
provide a smooth curved transition from one point, Pstart, to another point, Pend
• There are various types of Bezier curves:– Linear Bezier “curves”– Quadratic Bezier curves– Cubic Bezier curves– etc.
Linear Bezier “curves”
• A straight line from Pstart to Pend is a linear Bezier “curve”
Quadratic Bezier curves
• A quadratic Bezier curve heads from Pstart in the direction of another point, P1, before bending so that, when it arrives at Pend, it is coming from the direction of P1
• In other words, the quadratic Bezier curve is a quadratic curve whose tangent at Pstart passes through P1 and whose tangent at Pend also passes through P1
Using a quadratic Bezier curve to link two straight lines
• Format: /* somehow get to (PstartX,PstartY) and then …*/
quadraticCurveTo(P1X,P1Y,PendX,PendY);<script…context.beginPath();context.moveTo(0,175);context.lineTo(25,150);context.moveTo(285,150);context.lineTo(310,175);context.stroke();context.beginPath(); /*change colour*/context.strokeStyle="rgb(255,0,0)";context.moveTo(25,150);context.quadraticCurveTo(155,20,285,150);context.stroke();</script>
Only one path needed
• We don’t need to have more than one path if we don’t want to have different colours for the different sub-paths.
<script
…
context.beginPath();
context.moveTo(0,175);
context.lineTo(25,150);
context.quadraticCurveTo(155,20,285,150);
context.lineTo(310,175);
context.stroke();
</script>• Here, the two lines joined by the curve are hard to
see because they are actually tangents, but on the next slide, we can see the joined lines more clearly
Joining two non-tangents
• This, unrealistic, application shows a bezier curve joining two lines that are perpendicular to the curve’s tangeents
<script
…
context.beginPath();
context.moveTo(50,175);
context.lineTo(25,150);
context.quadraticCurveTo(155,20,285,150);
context.lineTo(260,175);
context.stroke();
</script>
Viewing a quadratic Bezier curve and its tangents
<script…context.beginPath();context.moveTo(25,150);context.lineTo(155,20);context.lineTo(285,150);context.stroke();context.beginPath();context.moveTo(25,150);context.quadraticCurveTo(155,20,285,150);context.strokeStyle="rgb(255,0,0)";context.stroke();</script>
Cubic Bezier curves
• A cubic Bezier curve heads from Pstart in the direction of another point, P1, before bending so that, when it arrives at Pend, it is coming from the direction of yet another point, P2
• In other words, a cubic Bezier curve is a cubic curve whose tangent at Pstart passes through P1 and whose tangent
at Pend passes through P2
Using a cubic Bezier curve to link two straight lines• Format: /* somehow get to (PstartX,PstartY) and then …*/ bezierCurveTo(P1X,P1Y,P2X,P2Y,PendX,PendY);
<script…context.beginPath();context.moveTo(0,175);context.lineTo(25,150);context.moveTo(385,150);context.lineTo(615,210);context.stroke();context.beginPath();context.moveTo(25,150);context.bezierCurveTo(85,90,155,90,385,150);context.strokeStyle="rgb(255,0,0)";context.stroke();</script>
Viewing a cubic Bezier curve and its tangents
<script…context.beginPath();context.moveTo(25,150);context.lineTo(85,90);context.lineTo(155,90);context.lineTo(385,150);context.stroke();context.beginPath();context.moveTo(25,150);context.bezierCurveTo(85,90,155,90,385,150);context.strokeStyle="rgb(255,0,0)";context.stroke();
</script>
Drawing with a circular arc• Format: arc(centerX, centerY, radius, startAngle, endAngle, direction);• Specify angles in radians• Direction: counterClockwise=true; clockwise=false<script…context.beginPath();context.moveTo(200, 85);context.lineTo(150,85);context.arc(100,100,25,Math.PI*1.1,Math.PI*.1.9,false);context.stroke();</script>
Be careful when drawing with an arc• When drawing with an arc, you should ensure that either
– You begin a new path, or– You ensure you are at the starting point of the arc you intend to draw
• Otherwise, an extra straight line will be drawn<script…context.beginPath();context.moveTo(100,125);context.lineTo(100,100);context.stroke();context.beginPath();context.arc(100,100,25,Math.PI*1.1,Math.PI*1.9,false);context.stroke();</script>
Be careful when drawing with an arc (contd). – an extra line• If you don’t begin a new path or ensure that you are at the start of the arc, an extra
straight line will be drawn, as can be seen below<script…context.beginPath();context.moveTo(100,125);context.lineTo(100,100);/* context.stroke();context.beginPath(); */context.arc(100,100,25,Math.PI*1.1,Math.PI*1.9,false);context.stroke();</script>
Drawing rectangles• There are four methods for drawing rectangles:
rect(topLeftX, topLeftY, rectangle width, rectangle height);fillRect(topLeftX, topLeftY, rectangle width, rectangle height);strokeRect(topLeftX, topLeftY, rectangle width, rectangle height);clearRect(topLeftX,topLeftY, rectangle width, rectangle height);
• rect() makes a rectangular path but does not fill it or make the outline the visible<script…var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");
context.rect(100,100,25,25);context.stroke();</script>
Drawing rectangles• strokeRect() makes a rectangle and draws the outline using the current
stroke style<script…var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");
context.strokeRect(100,100,25,25);</script>
Drawing rectangles• fillRect() makes a rectangle and fills it using the current fill style<script…var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");
context.fillRect(100,100,25,25);</script>
Drawing rectangles• clearRect() clears a rectangular area<script…var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");
context.fillRect(50,50,100,100);context.clearRect(100,100,25,25);</script>
Using transparency• Instead of using rgb to set the fillStyle, we can use rgba, whose fourth argument, ranging between 0 and 1, specifies the alpha, or
opacity/transparency, channel– alpha=0 is fully transparent; alpha=1 is fully opaque
• Below, the color of the small RHS rect results from laying a semi-transparent green shape over a red shape, mixing the colours<script…context.fillStyle="rgb(255,0,0)";context.fillRect(50,50,100,100);context.fillStyle="rgb(0,255,0)";context.fillRect(75,75,25,25);
context.fillStyle="rgb(255,0,0)";context.fillRect(175,50,100,100);context.fillStyle="rgba(0,255,0,0.5)";context.fillRect(200,75,25,25);</script>
Using transparency (contd.)• We can also set transparency globally• All subsequent operations will be affected<script…
context.fillStyle="rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.fillStyle="rgb(0,255,0)";
context.fillRect(75,75,25,25);
context.globalAlpha=0.3;
context.fillStyle="rgb(255,0,0)";
context.fillRect(175,50,100,100);
context.fillStyle="rgb(0,255,0)";
context.fillRect(200,25,25,25);</script>
Using colour gradients: linear gradients• createLinearGradient(startX,startY,endX,endY) defines a hidden line within a context, along which we can lay a gradient of colours• addColorStop(offset,colour) specifies a colour at some offset along a gradient• In the example below, we create a gradient along part of the diagonal of the big rectangle• It affects the entire context, including the small rectangle<script…context.rect(25,50,100,100);context.rect(170,0,50,50);
myGradient=context.createLinearGradient(35,60,115,140);myGradient.addColorStop(0.0,"rgb(255,0,0)");myGradient.addColorStop(0.5,"rgb(0,255,0)");myGradient.addColorStop(1.0,"rgb(0,0,255)");context.fillStyle=myGradient;
context.fill();
</script>
Using colour gradients: radial gradients• createRadialGradient(startX,startY,startRadius,endX,endY,endRadius) defines a pair of circles, between which we can lay a gradient of colours• In the example below, we create a radial gradient between two circles that are concentric with the left circle below<script…myGradient=context.createRadialGradient(150,100,20,150,100,100);myGradient.addColorStop(0.0,"rgb(255,0,0)");myGradient.addColorStop(0.5,"rgb(0,255,0)");myGradient.addColorStop(1.0,"rgb(0,0,255)");context.fillStyle=myGradient;
context.beginPath();context.arc(150,100,50,0,Math.PI*2.0,true);context.arc(250,100,50,0,Math.PI*2.0,true);context.fill();
</script>
Using colour gradients in the strokeStyle• In the example below, we use a radial gradient as the stroke style<script…myGradient=context.createRadialGradient(150,100,20,150,100,100);myGradient.addColorStop(0.0,"rgb(255,0,0)");myGradient.addColorStop(0.5,"rgb(0,255,0)");myGradient.addColorStop(1.0,"rgb(0,0,255)");
context.rect(25,25,100,100);context.lineWidth=10;context.strokeStyle=myGradient;context.stroke();
</script>
Drawing text in the canvas• Placing text in the canvas is like drawing any shape • Two methods are provided for placing text:
– strokeText(String,X,Y,[maxWidth]) draws text with outline letters– fillText(String,X,Y,[maxWidth]) draws text with filled letters
<script>var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");context.strokeText("Hello",100,90);</script>
Drawing text in the canvas (contd.)• In last example, could not see the letter outlines• But we can see the outlines if we specify a larger font<script>var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");context.font="80px arial";context.strokeText("Hello",100,90);</script>
Drawing text in the canvas (contd.)• Like any other path, we can control the line width of the letter outlines<script>var canvas=document.getElementById('myCanvas');var context = canvas.getContext("2d");context.lineWidth="5";context.font="80px arial";context.strokeText("Hello",100,90);</script>
Drawing text in the canvas (contd.)
• Like any other path, we can also control the style of line joins in the letter outlines
<script>…context.lineWidth="5";context.lineJoin="bevel";context.font="80px arial";context.strokeText("Hello",100,90);</script>
Drawing text in the canvas (contd.)
• Again like any other path, we can control the stroke style
<script>…context.strokeStyle=“rgb(255,0,0)";context.font="80px arial";context.strokeText("Hello",100,90);</script>
Drawing text in the canvas (contd.)
• Again like any other path, we can use a colour gradient in the stroke style
<script>…myGradient=context.createRadialGradient(150,100,20,150,100,100);myGradient.addColorStop(0.0,"rgb(255,0,0)");myGradient.addColorStop(0.5,"rgb(0,255,0)");myGradient.addColorStop(1.0,"rgb(0,0,255)");
context.strokeStyle=myGradient;context.font="80px arial";context.strokeText("Hello",100,90);
</script>
Drawing text in the canvas (contd.)
• Like other shapes in the canvas, we can have filled letters instead of outlined letters
<script>…context.font="80px arial";context.fillText("Hello",100,90);</script>
Drawing text in the canvas (contd.)
• We can, of course, control the fill style<script>…context.fillStyle=“rgb(255,0,0)";context.font="80px arial";context.fillText("Hello",100,90);</script>
Drawing text in the canvas (contd.)
• Since we can control the fill style, we can use a colour gradient in the fill
<script>…myGradient=context.createRadialGradient(150,100,20,150,100,100);myGradient.addColorStop(0.0,"rgb(255,0,0)");myGradient.addColorStop(0.5,"rgb(0,255,0)");
context.fillStyle=myGradient;context.font="80px arial";context.fillText("Hello",100,90);
</script>
Drawing text in the canvas (contd.)
• To have filled letters which also have outlines, we use both the fillText and strokeText methods
<script>…context.fillStyle=“rgb(255,0,0)";context.font="80px arial";context.fillText("Hello",100,90);context.strokeText("Hello",100,90);</script>
Horizontal text alignment – the default• To illustrate the alignment of text in the canvas, we
draw some lines in known positions<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.fillStyle = "blue";
context.font = "30pt Calibri";
context.fillText("Hello", x, y);</script>• The default horizontal alignment is left
Horizontal text alignment – explicit left alignment• We can, of course, make the left alignment explicit<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.fillStyle = "blue";
context.font = "30pt Calibri";
context.textAlign = “left";context.fillText("Hello", x, y);</script>
Horizontal text alignment – center alignment
<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.fillStyle = "blue";
context.font = "30pt Calibri";
context.textAlign = "center";context.fillText("Hello", x, y);</script>
Horizontal text alignment – right alignment
<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.fillStyle = "blue";
context.font = "30pt Calibri";
context.textAlign = “right";context.fillText("Hello", x, y);</script>
Vertical text alignment – the default
<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.fillStyle = "blue";
context.font = "30pt Calibri";
context.fillText("Hello", x, y);</script>• The default vertical alignment is called alphabetic
Vertical text alignments in the canvas
• The possible vertical text alignments are shown below• We set the vertical text alignment by controlling a context
parameter called the textBaseLine• Note the alphabetic textBaseLine
Vertical text alignment – making the default explicit
<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.textBaseline = "alphabetic";context.fillStyle = "blue";
context.font = "30pt Calibri";
context.fillText("Hello", x, y);</script>
Vertical text alignment – the middle alignment
<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.textBaseline = “middle";context.fillStyle = "blue";
context.font = "30pt Calibri";
context.fillText("Hello", x, y);</script>
Vertical text alignment – the top alignment
<script>…
var x = canvas.width / 2;
var y = canvas.height / 2;
context.beginPath();
context.moveTo(x,y-50);
context.lineTo(x,y);
context.lineTo(x+50,y);
context.stroke();
context.textBaseline = “top";context.fillStyle = "blue";
context.font = "30pt Calibri";
context.fillText("Hello", x, y);</script>
Drawing text in (contd.) – optional maxWidth parameter
• Below, compare the text widths with the canvas width<canvas id="myCanvas" width="400" height="200" style="border:solid 1px #ccc;">…<script>…context.fillStyle=“rgb(255,0,0)";context.font="80px arial";context.fillText("Hello",100,90,100);context.strokeText("Hello",100,90);</script>
Controlling text layout
• The HTML5 canvas provides many features for advanced control of the process of drawing text
• For example, the canvas object provides a method called measureText() which can be used to predict the width of a piece of text before it is drawn– This can be used to do such things as deciding whether or not
to insert line breaks when drawing the text • We may return to these features later
The clipping region
• All drawing operations affect only what is called the clipping region
• By default, the clipping region is the same as the entire area of the context
• We can create a new clipping region by – defining a closed path and – intersecting it with the current clipping region
Drawing a circle in the default clipping region• Below, the context has width=300 and height=200• The clipping region is the default, so the entire circle
appears<script…
context.beginPath();
context.arc(100,100,25,0,Math.PI*2,false);
context.fill();</script>
Drawing a circle with a new clipping region• When we define a smaller clipping region and then try to draw a full circle, only part of the circle
appears• Our drawing operation affects only the clipping region<script…
context.beginPath();
context.moveTo(100,50);
context.lineTo(100,100);
context.lineTo(200,100);
context.lineTo(200,50);
context.closePath();
context.clip();context.beginPath();
context.arc(100,100,25,0,Math.PI*2,false);
context.fill();</script>
Shadows• We can specify that we want shadows• We can control the colour and offset of the shadows<script…
context.fillStyle = "rgb(255,0,0)";
context.shadowColor = "rgb(99,99,99)";
context.shadowOffsetX = 35;
context.shadowOffsetY = 15;
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,false);
context.fill();</script>
Shadow blur• We can also control shadow blurring<script…context.fillStyle = "rgb(255,0,0)";context.shadowColor = "rgb(99,99,99)";context.shadowOffsetX = 35;context.shadowOffsetY = 15;context.shadowBlur = “10";context.beginPath();context.arc(100,100,50,0,Math.PI*2,false);context.fill();</script>
Transformations: translate• Both rectangles below are drawn with the upper-left corner at
(0,0) but, when the blue rectangle is drawn, the context has already been moved to the centre of the canvas
<script…context.fillStyle = "red";context.fillRect(0,0,150,75);
// translate context to centre of canvascontext.translate(canvas.width / 2, canvas.height / 2);context.fillStyle = "blue";context.fillRect(0,0, 150, 75);
</script>
Transformations: scale• Both rectangles below are drawn with the upper-left corner at
(0,0) and with width=150, height=75 but, when the blue rectangle is drawn, the context has already been scaled to 0.6 in X and 0.3 in Y
<script…context.fillStyle = "red";context.fillRect(0,0,150,75);
// translate context to centre of canvascontext.scale(0.6,0.3);context.fillStyle = "blue";context.fillRect(0,0, 150, 75);
</script>
Transformations: rotation• Both rectangles below are drawn with the upper-left corner at
(0,0) but, when the blue rectangle is drawn, the context has already been rotated by 90 degrees – the angle is specified in radians
<script…context.fillStyle = "red";context.fillRect(0,0,150,75);
// translate context to centre of canvascontext.rotate(Math.PI/4);context.fillStyle = "blue";context.fillRect(0,0, 150, 75);
</script>
Transformations: custom transformations• It is also possible to define custom transformatons
using matrix arithmetic• We may revisit this at some future point
Saving and restoring the context• The context can be saved, modified and restored to its previous state<script…context.fillStyle = "red";context.fillRect(0,0,200,150);context.save();
context.rotate(Math.PI/4)context.fillStyle = "green";context.fillRect(0,0, 75, 50);
context.restore();context.fillStyle = "blue";context.fillRect(0,0, 75, 50);</script>
Saving and restoring the context – the context stack• Multiple states can be stacked and unstacked<script…
context.fillStyle = "red";context.fillRect(0,0,200,150);context.save();context.rotate(Math.PI/8)context.fillStyle = "green";context.fillRect(0,0, 75, 50);context.save();context.rotate(Math.PI/8)context.fillStyle = "blue";context.fillRect(0,0, 75, 50);context.restore();context.fillStyle = "yellow";context.fillRect(0,0, 40, 30);context.restore();context.fillStyle = "pink";context.fillRect(0,0, 40, 30);
</script>
Compositing• Compositing is the combining of visual elements from
separate sources into a single image• In a sense, we have already done this many times –
– each time we fill/stroke a path or text, we are compositing the new path/text with the previous content of the canvas
• The HTML5 canvas provides eleven different forms of compositing
• We have been using the default form, which is called source-over compositing
• In definitions of the different forms of compositing, the new path/text is called the source image and the existing content of the canvas is called the destination
• Source-over compositing means: – Display the source image wherever the source image
is opaque. Display the destination image elsewhere. (Strictly, the above definition assumes that globalAlpha
and all required transformations have already been applied)
Seeing the compositing operations in use• To see the effect of the various compositing operations,
open the following URL in a modern broswer which supports the canvas element:
http://www.cs.ucc.ie/j.bowen/cs4506/slides/compositingDemo.html
Form of compositing (part 1)• Below, we refer to the source image as S and the destination image
as D and we assume that globalAlpha and all transformations have already been applied
• source-over (default)– S over D. Display the source image wherever the source image is
opaque. Display the destination image elsewhere.• source-atop
– S atop D. Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere.
• source-in– S in D. Display the source image wherever both the source image and
destination image are opaque. Display transparency elsewhere.• source-out
– S out D. Display the source image wherever the source image is opaque and the destination image is transparent. Display transparency elsewhere.
• destination-atop– D atop S. Same as source-atop but using the destination image instead
of the source image and vice versa.
Form of compositing (part 2)• destination-in
– D in S. Same as source-in but using the destination image instead of the source image and vice versa.
• destination-out– D out S. Same as source-out but using the destination image
instead of the source image and vice versa.• destination-over
– D over S. Same as source-over but using the destination image instead of the source image and vice versa.
• lighter– S plus D. Display the sum of the source image and destination
image, with color values approaching 255 (100%) as a limit.• copy
– S (D is ignored). Display the source image instead of the destination image.
• xor– S xor D. Exclusive OR of the source image and destination
image.