% The JavaScript file for the canvas drawings % [bucephalus.org](http://bucephalus.org) % December 2012 # General tool functions ## `CanvasRenderingContext2D.addGrid (delta, color, font)` > CanvasRenderingContext2D.prototype.addGrid = function (delta, color, font) { > // define the default values for the optional arguments > if (! arguments[0]) { delta = 25; } > if (! arguments[1]) { color = 'blue'; } > if (! arguments[2]) { font = '8px sans-serif'; } > // extend the canvas width and height by delta > var oldWidth = this.canvas.width; > var oldHeight = this.canvas.height; > this.canvas.width = oldWidth + delta; > this.canvas.height = oldHeight + delta; > // draw the vertical and horizontal lines > this.lineWidth = 0.1; > this.strokeStyle = color; > this.beginPath(); > for (var i = 0; i * delta < oldWidth; i ++) { > this.moveTo (i * delta, 0); > this.lineTo (i * delta, oldHeight); > } > for (var j = 0; j * delta < oldHeight; j ++) { > this.moveTo (0, j * delta); > this.lineTo (oldWidth, j * delta); > } > this.closePath(); > this.stroke(); > // draw a thicker line, which is the border of the original canvas > this.lineWidth = 0.5; > this.beginPath(); > this.moveTo(0,0); > this.lineTo(oldWidth,0); > this.lineTo(oldWidth,oldHeight); > this.lineTo(0,oldHeight); > this.lineTo(0,0); > this.closePath(); > this.stroke(); > // set the text parameters and write the number values to the vertical and horizontal lines > this.font = font; > this.lineWidth = 0.3; > // 1. writing the numbers to the x axis > var textY = oldHeight + Math.floor(delta/2); // y-coordinate for the number strings > for (var i = 0; i * delta <= oldWidth; i ++) { > this.strokeText (i * delta, i * delta, textY); > } > // 2. writing the numbers to the y axis > var textX = oldWidth + 5; // x-coordinate for the number strings > for (var j = 0; j * delta <= oldHeight; j ++) { > this.strokeText (j * delta, textX, j * delta); > } > }; ## `CanvasRenderingContext2D.addTransGrid (a, b, c, d, e, f, delta, gridColor, frameColor, font)` > CanvasRenderingContext2D.prototype.addTransGrid = function (a, b, c, d, e, f, delta, gridColor, frameColor, font) { > // define the default values for the optional arguments > if (typeof arguments[6] === "undefined") { delta = 25; } > if (typeof arguments[7] === "undefined") { gridColor = 'blue'; } > if (typeof arguments[8] === "undefined") { frameColor = 'red'; } > if (typeof arguments[9] === "undefined") { font = '8px sans-serif'; } > // local function, where trans([x0,y0])===[x,y] is new coordinate point for the given point [x0,y0] > var trans = function (point) { > var x = point[0]; > var y = point[1]; > return [(a*x)+(c*y)+e, (b*x)+(d*y)+f]; > } > // original (old) canvas width and height > var w = this.canvas.width; > var h = this.canvas.height; > // compute the new four corner points of the old canvas border > var lup = trans ([0, 0]); // left upper point > var llp = trans ([0, h]); // left lower point > var rup = trans ([w, 0]); // right upper point > var rlp = trans ([w, h]); // right lower point > // compute the lowest and highest x and y values of both the old and the new canvas border > var minX = Math.min (lup[0], llp[0], rup[0], rlp[0], 0); // is negative or zero > var maxX = Math.max (lup[0], llp[0], rup[0], rlp[0], w); // is positive, at least w > var minY = Math.min (lup[1], llp[1], rup[1], rlp[1], 0); // is negative or zero > var maxY = Math.max (lup[1], llp[1], rup[1], rlp[1], h); // is positve, at least h > // compute the offset for the x and y axis > var xOff = (minX < 0 ? -minX : 0) + delta; // is positive > var yOff = (minY < 0 ? -minY : 0) + delta; // is positive > // resize the canvas > new_w = xOff + maxX + delta; > new_h = yOff + maxY + delta; > this.canvas.width = new_w; > this.canvas.height = new_h; > // offTrans([x,y]) returns the transformed point [x',y'] that takes care of the offset > function offTrans (p) { > var newP = trans(p) > return ([xOff + newP[0], yOff + newP[1]]); > }; > // draw the frame, i.e. the border of the original canvas > this.strokeStyle = frameColor; > this.lineWidth = 3.0; > this.lineJoin = 'miter'; > this.lineCap = 'round'; > this.strokeRect (xOff, yOff, w, h); > // draw the new grid > this.strokeStyle = gridColor; > this.lineWidth = 1.0; > this.beginPath(); > for (var i = 0; i*delta <=w; i++) { > var p = offTrans ([i*delta, 0]); > var q = offTrans ([i*delta, h]); > this.moveTo (p[0], p[1]); > this.lineTo (q[0], q[1]); > } > for (var j = 0; j * delta <= h; j++) { > var p = offTrans ([0, j*delta]); > var q = offTrans ([w, j*delta]); > this.moveTo (p[0], p[1]); > this.lineTo (q[0], q[1]); > } > this.stroke(); > // draw the two arrows for the new grid > this.strokeStyle = gridColor; > this.lineWidth = 3.0; > this.lineJoin = 'miter'; > this.lineCap = 'round'; > var arrSize = 5; // size of the arrow head > this.beginPath(); > // x-arrow > this.moveTo (offTrans([0,0])[0], offTrans([0,0])[1]); > this.lineTo (offTrans([w,0])[0], offTrans([w,0])[1]); > this.moveTo (offTrans([w-arrSize,-arrSize])[0], offTrans ([w-arrSize,-arrSize])[1]); > this.lineTo (offTrans([w,0])[0], offTrans([w,0])[1]); > this.moveTo (offTrans([w-arrSize,arrSize])[0], offTrans ([w-arrSize,arrSize])[1]); > this.lineTo (offTrans([w,0])[0], offTrans([w,0])[1]); > // y-arrow > this.moveTo (offTrans([0,0])[0], offTrans([0,0])[1]); > this.lineTo (offTrans([0,h])[0], offTrans([0,h])[1]); > this.moveTo (offTrans([-arrSize,h-arrSize])[0], offTrans([-arrSize,h-arrSize])[1]); > this.lineTo (offTrans([0,h])[0], offTrans([0,h])[1]); > this.moveTo (offTrans([arrSize,h-arrSize])[0], offTrans([arrSize,h-arrSize])[1]); > this.lineTo (offTrans([0,h])[0], offTrans([0,h])[1]); > this.stroke(); > // write the text; first the numbers of the x-axis > this.textBaseline = 'middle'; > this.textAlign = 'center'; > this.fillStyle = gridColor; > var halfDelta = - Math.floor (delta / 2); // y-coordinate for the number strings > for (var i = 0; i * delta <= w; i++) { > this.fillText (i*delta, offTrans ([i*delta, halfDelta])[0], offTrans ([i*delta, halfDelta])[1]); > } > for (var j = 0; j * delta <= h; j++) { > this.fillText (j*delta, offTrans ([halfDelta, j*delta])[0], offTrans ([halfDelta, j*delta])[1]); > } > // write `x` and `y` > this.fillText ('x', offTrans ([w-halfDelta, 0])[0], offTrans ([w-halfDelta,0])[1]); > this.fillText ('y', offTrans ([0, h-halfDelta])[0], offTrans ([0, h-halfDelta])[1]); > } ## Derived transformation grids ### `CanvasRenderingContext2D.prototype.addScaledGrid = function (x, y, delta, gridColor, frameColor, font)` > CanvasRenderingContext2D.prototype.addScaledGrid = function (x, y, delta, gridColor, frameColor, font) { > this.addTransGrid (x, 0, 0, y, 0, 0, delta, gridColor, frameColor, font); > }; ### `CanvasRenderingContext2D.prototype.addRotatedGrid (angle, delta, gridColor, frameColor, font)` > CanvasRenderingContext2D.prototype.addRotatedGrid = function (angle, delta, gridColor, frameColor, font) { > var c = Math.cos(angle); > var s = Math.sin(angle); > this.addTransGrid (c, s, -s, c, 0, 0, delta, gridColor, frameColor, font); > }; ### `CanvasRenderingContext2D.prototype.addTranslatedGrid (x, y, delta, gridColor, frameColor, font)` > CanvasRenderingContext2D.prototype.addTranslatedGrid = function (x, y, delta, gridColor, frameColor, font) { > this.addTransGrid (1, 0, 0, 1, x, y, delta, gridColor, frameColor, font); > }; ### `CanvasRenderingContext2D.prototype.addShearedGrid (x, y, delta, gridColor, frameColor, font)` > CanvasRenderingContext2D.prototype.addShearedGrid = function (x, y, delta, gridColor, frameColor, font) { > this.addTransGrid (1, y, x, 1, 0, 0, delta, gridColor, frameColor, font); > }; ### `CanvasRenderingContext2D.prototype.addStandardGrid (x, y, delta, gridColor, frameColor, font)` > CanvasRenderingContext2D.prototype.addStandardGrid = function (delta, gridColor, frameColor, font) { > this.addTransGrid (1, 0, 0, 1, 0, 0, delta, gridColor, frameColor, font); > }; ### `CanvasRenderingContext2D.prototype.addRotateAboutGrid (angle, x, y, delta, gridColor, frameColor, font)` > CanvasRenderingContext2D.prototype.addRotateAboutGrid = function (angle, x, y, delta, gridColor, frameColor, font) { > var c = Math.cos(angle); > var s = Math.sin(angle); > this.addTransGrid (c, -s, s, c, -x*c-y*s+x, x*s-y*c+y, delta, gridColor, frameColor, font); > }; ## `composeTransform ([a1,b1,c1,d1,e1,f1], [a2,b2,c2,d2,e2,f2])` takes the two transformation parameter sixtuples and returns the composed sixtuple `[a3,b3,c3,d3,e3,f3]`. > function composeTransform (arr1, arr2) { > if (Array.isArray (arr1) && Array.isArray (arr2)) { > if (arr1.length === 6 && arr2.length === 6) { > // components of arr1 > var a1 = arr1[0]; > var b1 = arr1[1]; > var c1 = arr1[2]; > var d1 = arr1[3]; > var e1 = arr1[4]; > var f1 = arr1[5]; > // components of arr2 > var a2 = arr2[0]; > var b2 = arr2[1]; > var c2 = arr2[2]; > var d2 = arr2[3]; > var e2 = arr2[4]; > var f2 = arr2[5]; > // components of the resulting array > var a3 = (a2 * a1) + (c2 * b1); > var b3 = (b2 * a1) + (d2 * b1); > var c3 = (a2 * c1) + (c2 * d1); > var d3 = (b2 * c1) + (d2 * d1); > var e3 = (a2 * e1) + (c2 * f1) + e2; > var f3 = (b2 * e1) + (d2 * f1) + f2; > return [a3, b3, c3, d3, e3, f3]; > } else { > throw Error ("The two array arguments of composeTransform(arr1,arr2) must both have six components each."); > } > } else { > throw Error ("The two arguments of composeTransform(arr1,arr2) must both be arrays."); > } > }; # Local functions ### `canvasIdList()` returns the list of `id` values of all the `` elements in the text. A call of `canvasIdList()` from the Firebug console returns ["VeryFirstExampleCanvas", "LittleTricolour", null, null, "ContextAccessTemplate1", "GridExplained1", ...] The `null` entries come from the `` tags without `id` attribute. > function canvasIdList () { > var canvasList = document.getElementsByTagName('canvas'); // now an array of HTMLCanvasElement objects > var idList = []; > for (var i = 0; i < canvasList.length; i++) { > idList.push (canvasList[i].getAttribute('id')); > } > return idList; > }; # The`allCanvasDrawings()` --- begin of the function The remainder of this file contains the scripts for the `` elements in the main document file [CanvasHandbook.html](CanvasHandbook.html) and [CanvasHandbook.markdown](CanvasHandbook.markdown), respectively. All these scripts are simply concatenated and wrapped in a function `addCanvasDrawings()`. This function is then called when the document has loaded, i.e. it is registered as the event listener window.onload = allCanvasDrawings; as described in the "Third template" of the [appendix on file templates](CanvasHandbook.html#html5-file-templates). > function allCanvasDrawings () { ## `allCanvasDrawings()` --- begin of the function ### `VeryFirstExampleCanvas` > var canvas = document.getElementById ('VeryFirstExampleCanvas'); // access the canvas object > var context = canvas.getContext ('2d'); // access the canvas context > context.fillStyle = 'red'; // set the color to 'red' > context.fillRect (0,0,150,60); // draw a red box on the whole of the canvas > context.fillStyle = 'yellow'; // set the color to 'yellow' > context.fillRect (5,5,140,50); // draw a yellow box inside the red on > context.fillStyle = 'red'; // set the color back to 'red' > context.font = '40pt Arial'; // define the CSS font for writing text > context.fillText ('Hello',10,50); // write the text 'Hello' ### `Tricolour` > // First, get hold of the canvas object and its context > var tricolourCanvas = document.getElementById('LittleTricolour'); > var tricolourCanvasContext = tricolourCanvas.getContext('2d'); > // Now do the real drawings: > tricolourCanvasContext.fillStyle = '#0055A4'; // set the color to blue > tricolourCanvasContext.fillRect ( 0, 0, 40, 90); // draw a blue rectangle on the left > tricolourCanvasContext.fillStyle = '#FFFFFF'; // set the color to white > tricolourCanvasContext.fillRect (40, 0, 40, 90); // draw a white rectangle in the middle > tricolourCanvasContext.fillStyle = '#EF4135'; // set the color to red > tricolourCanvasContext.fillRect (80, 0, 40, 90); // draw a red rectangle on the right ### `ContextAccessTemplate1` > var canvas = document.getElementById('ContextAccessTemplate1'); > canvas.width = 800; > canvas.height = 280; > var context = canvas.getContext('2d'); > //context.addGrid(); > // the boxes > context.strokeStyle = 'black'; > context.strokeRect (10, 50, 175, 125); > context.strokeRect (475, 50, 300, 225); > context.fillStyle = '#EEEEEE'; > context.fillRect (490,85,150,50) > context.fillRect (510,200,225,50); > // the arrows > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (177,100); context.lineTo (485,100); > context.moveTo (480,95); context.lineTo (485,100); context.lineTo (480,105); > context.moveTo (520,115); context.lineTo (520,195); > context.moveTo (515,190); context.lineTo (520,195); context.lineTo (525,190); > context.stroke(); > // the text > context.textBaseline = 'middle'; > context.fillStyle = 'black'; > context.font = '18pt Arial'; > context.fillText ('HTML (and CSS)',10,25); > context.fillText ('DOM / JavaScript', 530,25); > context.fillStyle = 'blue'; > context.font = '10pt monospace'; > context.fillText ('...',25,75); > context.fillText ('', 25,100); > context.fillText ('', 25,125); > context.fillText ('...',25,150); > context.fillText ('HTMLCanvasElement', 500,100); > context.fillText ('CanvasRenderingContext2D',520,215); > context.fillText ("document.getElementById('myCan')",205,87); > context.fillText ("getContext('2d')",530,167); ### `DomOverview` > var context = document.getElementById('DomOverview').getContext('2d'); > //context.addGrid(); > // the flow diagram > context.strokeStyle = 'black'; > context.strokeRect (25, 50, 225, 325); // the HTML box > context.strokeRect (500, 50, 225, 325); // the DOM box > context.beginPath(); // the tree structure > context.moveTo(525,85); > context.lineTo(525,175); > context.lineTo(540,175); > context.moveTo(525,100); > context.lineTo(540,100); > context.moveTo(550,110); > context.lineTo(550,150); > context.moveTo(550,125); > context.lineTo(565,125); > context.moveTo(550,150); > context.lineTo(565,150); > context.moveTo(550,185); > context.lineTo(550,300); > context.lineTo(565,300); > context.moveTo(550,200); > context.lineTo(565,200); > context.moveTo(550,225); > context.lineTo(565,225); > context.moveTo(550,250); > context.lineTo(565,250); > context.moveTo(550,275); > context.lineTo(565,275); > context.stroke(); > // the text > context.textBaseline = 'middle'; > context.fillStyle = 'black'; > context.font = '18pt Arial'; > context.fillText ('HTML (and CSS)',45,25); > context.fillText ('DOM / JavaScript', 530,25); > context.fillStyle = 'blue'; > context.font = '10pt monospace'; > context.fillText ('',50,75); > context.fillText ('',60,100); > context.fillText ('...',70,125); > context.fillText ('',60,150); > context.fillText ('',60,175); > context.fillText ('...',70,200); > context.fillText ('',70,225); > context.fillText ('...',70,250); > context.fillText ('',70,275); > context.fillText ('...',70,300); > context.fillText ('',60,325); > context.fillText ('',50,350); > context.fillText ('HTMLDocument', 525,75); > context.fillText ('HTMLHeadElement', 550,100); > context.fillText ('...',575,125); > context.fillText ('...',575,150); > context.fillText ('HTMLBodyElement', 550,175); > context.fillText ('...',575,200); > context.fillText ('HTMLCanvasElement',575,225); > context.fillText ('...',575,250); > context.fillText ('HTMLCanvasElement',575,275); > context.fillText ('...',575,300); > // the arrows with text > context.strokeStyle = 'green'; > context.beginPath(); // the green arrows > // first arrow > context.moveTo(110,75); context.lineTo(520,75); > context.moveTo(515,70); context.lineTo(520,75); context.lineTo(515,80); > // second arrow > context.moveTo(245,225); context.lineTo(545,225); > context.moveTo(540,220); context.lineTo(545,225); context.lineTo(540,230); > // third arrow > context.moveTo(245,275); context.lineTo(545,275); > context.moveTo(540,270); context.lineTo(545,275); context.lineTo(540,280); > context.stroke(); > context.font = '8pt monospace'; > context.textAlign = 'center'; > context.fillText ("document",375,65) > context.fillText ("document.getElementById('Canvas1')",375,215); > context.fillText ("document.getElementById('Canvas2')",375,265); ### `GridExplained1` > var context = document.getElementById('GridExplained1').getContext('2d'); > //context.addGrid(); > // arrows > context.lineWidth = 1.0; > //context.lineCap = 'round'; > context.strokeStyle = 'blue'; > context.beginPath(); > context.moveTo (10,10); > context.lineTo (310,10); > context.lineTo (305,7); > context.lineTo (305,13); > context.lineTo (310,10); > context.moveTo (10,10); > context.lineTo (10,160); > context.lineTo (7,155); > context.lineTo (13,155); > context.lineTo (10,160); > context.stroke(); > // text > context.fillStyle = 'black'; > context.font = '8px sans-serif'; > context.fillText ('0', 25,25); > context.fillText ('150', 25, 165); > context.fillText ('300', 300, 30); > context.font = '20px sans-serif'; > context.fillText ('x',155,30); > context.fillText ('y',30,90); ### `GridExplained2` > var context = document.getElementById('GridExplained2').getContext('2d'); > //context.addGrid(); > context.fillStyle = 'red'; > context.beginPath(); > context.arc (200,25,4,0,2*Math.PI); > context.fill(); ### `GridExplained3` > var context = document.getElementById('GridExplained3').getContext('2d'); > context.addGrid(); > context.fillStyle = 'red'; > context.beginPath(); > context.arc (200,25,4,0,2*Math.PI); > context.fill(); ### `GridExplained4` > var context = document.getElementById('GridExplained4').getContext('2d'); > //context.addGrid(); > context.fillStyle = 'rgba(100%,0%,0%,0.5)'; > context.beginPath(); > context.arc (250,100,100,0,2*Math.PI); > context.fill(); ### `GermanFlag` > // get the canvas object and its context > var canvas = document.getElementById('GermanFlag'); > var context = canvas.getContext('2d'); > // add the grid with 40 pixels for each step to the next line (see the appendix on this addGrid() method > context.addGrid(40); // THIS IS NOT A STANDARD METHOD!!! > // now draw the colored rectangles > context.fillStyle = '#000000'; // set the color to black ('#000000' is the same as 'black') > context.fillRect(0, 0,200,40); // draw a rectangle field with top left point at (0,0), 200 pixel wide and 40 pixel high > context.fillStyle = '#FF0000'; // set the color to red (which is '#FF0000' is CSS hexadecimal color notation) > context.fillRect(0,40,200,40); // draw same size (200x40 pixel) red rectangle at (0,40) > context.fillStyle = '#FFCC00'; // set the color to gold > context.fillRect(0,80,200,40); // golden rectangle with left top point at (0,80) ### `SizeReadingSample` > var canvas = document.getElementById('SizeReadingSample'); > var message = "This canvas is " + canvas.height + " pixel high and " + canvas.width + " pixel wide."; > var context = canvas.getContext('2d'); > context.font = "20px Arial"; > context.fillText (message, 15, 70); ### `SizeChangingSample` > var canvas = document.getElementById('SizeChangingSample'); > canvas.width = 30; > canvas.height = 30; ### `DataUrlSample`
................................THERE ARE SOME SCRIPTS HERE.................................
### `ReferenceSample1` > var context = document.getElementById('ReferenceSample1').getContext('2d'); > context.canvas.width = 250; // reset the canvas width to 250 > context.canvas.height = 50; // reset the canvas height to 50 ### `StateSample` > var context = document.getElementById('StateSample').getContext('2d'); > context.addGrid(); > // Text style settings (these will be part of Start A, B, and C alike, because they do not change) > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.lineWidth = 2.0; > context.font = '25px Arial'; > // Settings for State A > var verticalGrad = context.createLinearGradient (0,0,0,200); > verticalGrad.addColorStop (0,'red'); > verticalGrad.addColorStop (1,'green'); > context.fillStyle = verticalGrad; > context.strokeStyle = 'yellow'; > // Draw Figure 1 > context.fillRect (25,25,100,150); > context.strokeText ("Fig 1",75,50); > context.strokeText ("State A", 75,125); > // Save State A > context.save(); > // Settings for State B > var radGrad = context.createRadialGradient (375,100,5, 375,100,200); > radGrad.addColorStop (0,'orange'); > radGrad.addColorStop (1,'yellow'); > context.fillStyle = radGrad; > context.strokeStyle = 'green'; > // Draw Figure 2 > context.fillRect (175,25,100,150); > context.strokeText ("Fig 2",225,50); > context.strokeText ("State B",225,125); > // Save State B > context.save(); > // Settings for State C > context.fillStyle = '#888888'; > context.strokeStyle = '#EEEEEE'; > // Draw Figure 3 > context.fillRect (325,25,100,150); > context.strokeText ("Fig 3",375,50); > context.strokeText ("State C",375,125); > // Pop State C and restore State B > context.restore(); > // Draw Figure 4 > context.fillRect (475,25,100,150); > context.strokeText ("Fig 4",525,50); > context.strokeText ("State B",525,125); > // Pop state B and restore state A > context.restore(); > // Draw Figure 5 > context.fillRect (625,25,100,150); > context.strokeText ("Fig 5",675,50); > context.strokeText ("State A",675,125); ### `ScalingGrid01` > var context = document.getElementById('ScalingGrid01').getContext('2d'); > // bottom text > context.font = '12pt monospace'; > context.strokeStyle = 'black'; > context.textAlign = 'left'; > context.textBaseline = 'bottom'; > context.strokeText ('scale(x,y)', 25, 220); > // the picture > context.strokeStyle = 'black'; > context.font = '8pt sans-serif'; > context.strokeText ( '(0,0)', 10, 20); > context.translate (25,25); > context.strokeStyle = 'red'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); > context.scale (0.8,1.5); > context.strokeStyle = 'blue'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); ### `RotationGrid01` > var context = document.getElementById('RotationGrid01').getContext('2d'); > // bottom text > context.font = '12pt monospace'; > context.strokeStyle = 'black'; > context.textAlign = 'left'; > context.textBaseline = 'bottom'; > context.strokeText ('rotate(angle)', 25, 220); > // the picture > context.strokeStyle = 'black'; > context.font = '8pt sans-serif'; > context.strokeText ( '(0,0)', 60, 20); > context.strokeText ( 'angle', 150, 50); > context.beginPath(); > context.arc (75, 25, 75, 0, 0.5, false); > context.stroke(); > context.translate (75,25); > context.strokeStyle = 'red'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); > context.rotate (0.5); > context.strokeStyle = 'blue'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); ### `TranslatingGrid01` > var context = document.getElementById('TranslatingGrid01').getContext('2d'); > // bottom text > context.font = '12pt monospace'; > context.strokeStyle = 'black'; > context.textAlign = 'left'; > context.textBaseline = 'bottom'; > context.strokeText ('translate(x,y)', 25, 220); > // the text > context.strokeStyle = 'black'; > context.font = '8pt sans-serif'; > context.lineWidth = 1; > context.strokeText ('(0,0)', 10, 20); > context.strokeText ('(x,y)', 85, 70); > // the blue rectangle with x and y > context.translate (25,25); > context.strokeStyle = 'red'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); > // the red rectangle with x and y > context.translate (75, 50); > context.strokeStyle = 'blue'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); ### `ScalingGrid11` > var context = document.getElementById('ScalingGrid11').getContext('2d'); > context.addScaledGrid(1,1,40); ### `ScalingGrid12` > var context = document.getElementById('ScalingGrid12').getContext('2d'); > context.addScaledGrid(0.8,1.5,40); ### `ScalingGrid21` > var context = document.getElementById('ScalingGrid21').getContext('2d'); > context.strokeStyle = 'green'; > context.lineWidth = 5.0; > context.beginPath(); > context.arc (100,100,80,0,2*Math.PI); > context.stroke(); ### `ScalingGrid22` > var context = document.getElementById('ScalingGrid22').getContext('2d'); > context.scale (0.8,1.5); > context.strokeStyle = 'green'; > context.lineWidth = 5.0; > context.beginPath(); > context.arc (100,100,80,0,2*Math.PI); > context.stroke(); ### `ScalingSample1` > var context = document.getElementById('ScalingSample1').getContext('2d'); > context.fillStyle = 'red'; > context.strokeStyle = 'black'; > context.font = '40px Arial'; > // 1. draw a rectangle with text > context.fillRect (50, 50, 150, 40); > context.strokeText ('1. Hello', 55, 85); > // 2. scale and draw the same rectangle with text again > context.scale (0.8, 2); // shrink x by 0.8 and double y > context.fillRect (50, 50, 150, 40); > context.strokeText ('2. Hello', 55, 85); > // 3. scale once more, and make the same drawings > context.scale (0.8, 2); // shrink x by 0.8 and double y, again > context.fillRect (50, 50, 150, 40); > context.strokeText ('3. Hello', 55, 85); ### `YMirror1` > var context = document.getElementById('YMirror1').getContext('2d'); > context.addScaledGrid (-1, 1); ### `YMirror2` > var context = document.getElementById('YMirror2').getContext('2d'); > context.scale (-1, 1); > context.fillStyle = 'green'; > context.fillRect (-175, 70, 150, 60); > context.fillStyle = 'yellow'; > context.fillRect (-170, 75, 140, 50); > context.fillStyle = 'green'; > context.font = "40pt Arial"; > context.fillText("Hello", -160, 120); ### `XMirror1` > var context = document.getElementById('XMirror1').getContext('2d'); > context.addScaledGrid (1, -1); ### `RotationGrid1` > var context = document.getElementById('RotationGrid1').getContext('2d'); > context.strokeStyle = 'black'; > context.strokeText ( '(0,0)', 60, 20); > context.strokeText ( 'angle', 150, 50); > context.beginPath(); > context.arc (75, 25, 75, 0, 0.5, false); > context.stroke(); > context.translate (75,25); > context.strokeStyle = 'red'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); > context.rotate (0.5); > context.strokeStyle = 'blue'; > context.strokeRect (0, 0, 125, 100); > context.strokeText ('x', 115, 11); > context.strokeText ('y', 5, 93); ### `RotationGrid23` > var canvas = document.getElementById('RotationGrid23'); > var context = canvas.getContext('2d'); > context.addRotatedGrid (15 * Math.PI / 180); ### `RotationGrid2` > var canvas = document.getElementById('RotationGrid2'); > var context = canvas.getContext('2d'); > // set the parameters; > var d = 50; > var w = 300; > var h = 150; > // derive the indices > var i; > var j; > var i1 = 2 * Math.round (w / d); > var i0 = - i1; > var j1 = 2 * Math.round (h / d); > var j0 = - j1; > // the grid lines > context.strokeStyle = 'yellow'; > context.lineWidth = 1.0; > context.beginPath(); > for (j = j0; j <= j1; j++) { > context.moveTo (0, d * j); > context.lineTo (w, d * j); > }; > for (i = i0; i <= i1; i++) { > context.moveTo (d * i, 0); > context.lineTo (d * i, h); > }; > context.stroke(); > // the text for the points > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.fillStyle = 'black'; > context.font = '7pt sans-serif'; > for (i = i0; i <= i1; i++) { > for (j = j0; j <= j1; j++) { > context.fillText ( '(' + i * d + ',' + j * d + ')' , i * d, j * d ); > }; > }; ### `RotationGrid3` > var canvas = document.getElementById('RotationGrid3'); > var context = canvas.getContext('2d'); > // rotate > context.rotate (15 * Math.PI / 180); > // set the parameters; > var d = 50; > var w = canvas.width; > var h = canvas.height; > // derive the indices > var i; > var j; > var i1 = 2 * Math.round (w / d); > var i0 = - i1; > var j1 = 2 * Math.round (h / d); > var j0 = - j1; > // the grid lines > context.strokeStyle = 'yellow'; > context.lineWidth = 1.0; > context.beginPath(); > for (j = j0; j <= j1; j++) { > context.moveTo (- 2 * w, d * j); > context.lineTo (2 * w, d * j); > }; > for (i = i0; i <= i1; i++) { > context.moveTo (d * i, - 2 * h); > context.lineTo (d * i, 2 * h); > }; > context.stroke(); > // the box > context.strokeStyle = 'blue'; > context.lineWidth = 1.0; > context.strokeRect (0,0,w,h); > // the text for the points > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.fillStyle = 'black'; > context.font = '7pt sans-serif'; > for (i = i0; i <= i1; i++) { > for (j = j0; j <= j1; j++) { > context.fillText ( '(' + i * d + ',' + j * d + ')' , i * d, j * d ); > }; > }; ### `RotationSample1` > var context = document.getElementById('RotationSample1').getContext('2d'); > context.fillStyle = 'red'; > context.strokeStyle = 'black'; > context.font = '40px Arial'; > // 1. draw a rectangle with text > context.fillRect (100, 5, 150, 40); > context.strokeText ('1. Hello', 105, 40); > // 2. declare a rotation and draw the same rectangle with text again > context.rotate (30 * Math.PI / 180); // first rotation of 30 degree > context.fillRect (100, 5, 150, 40); > context.strokeText ('2. Hello', 105, 40); > // 3. declare the same rotation, once more, and make the same drawings > context.rotate (30 * Math.PI / 180); // second rotation of 30 degree > context.fillRect (100, 5, 150, 40); > context.strokeText ('3. Hello', 105, 40); ### `TranslationGrid2` > var context = document.getElementById('TranslationGrid2').getContext('2d'); > context.addStandardGrid(50); ### `TranslationGrid3` > var context = document.getElementById('TranslationGrid3').getContext('2d'); > context.addTranslatedGrid (100,-50,50); ### `TranslationGrid4` > var context = document.getElementById('TranslationGrid4').getContext('2d'); > context.strokeStyle = 'red'; > context.strokeRect (25, 25, 250, 150); > context.strokeStyle = 'black'; > context.textAlign = 'center'; > context.strokeText ('x=0', 25, 15); > context.strokeText ('50', 75, 15); > context.strokeText ('100', 125, 15); > context.strokeText ('150', 175, 15); > context.strokeText ('200', 225, 15); > context.strokeText ('250', 275, 15); > context.textAlign = 'right'; > context.textBaseline = 'middle'; > context.strokeText ('y=0', 20, 25); > context.strokeText ('50', 20, 75); > context.strokeText ('100', 20, 125); > context.strokeText ('150', 20, 175); ### `TranslationGrid5` > var context = document.getElementById('TranslationGrid5').getContext('2d'); > context.strokeStyle = 'red'; > context.strokeRect (25, 25, 250, 150); > context.strokeStyle = 'black'; > context.textAlign = 'center'; > context.strokeText ('-100', 25, 15); > context.strokeText ('-50', 75, 15); > context.strokeText ('0', 125, 15); > context.strokeText ('50', 175, 15); > context.strokeText ('100', 225, 15); > context.strokeText ('150', 275, 15); > context.textAlign = 'right'; > context.textBaseline = 'middle'; > context.strokeText ('50', 20, 25); > context.strokeText ('100', 20, 75); > context.strokeText ('150', 20, 125); > context.strokeText ('200', 20, 175); ### `TranslationSample1` > var context = document.getElementById('TranslationSample1').getContext('2d'); > context.fillStyle = 'red'; > context.strokeStyle = 'black'; > context.font = '40px Arial'; > // 1. draw the first red rectangle with text > context.fillRect (0,5,150,40); > context.strokeText ('1. Hello', 5, 40); > // 2. declare a translation and draw the same rectangle, again > context.translate(125,50); // first call of translate(125,50) > context.fillRect (0,5,150,40); > context.strokeText ('2. Hello', 5, 40); > // 3. declare the same translation, once more, and make the same drawings > context.translate(125,50); // second call of translate(125,50) > context.fillRect (0,5,150,40); > context.strokeText ('3.Hello', 5, 40); ### `TransformGrid0` > var context = document.getElementById('TransformGrid0').getContext('2d'); > context.addTransGrid (1, 0, 0, 1, 0, 0, 30, 'blue', 'red', '8pt sans-serif'); ### `TransformGrid1` > var context = document.getElementById('TransformGrid1').getContext('2d'); > context.addTransGrid (0.5, 0.4, -0.2, 1.2, 200, 0, 30, 'blue', 'red', '8pt sans-serif'); ### `TransformationSample1` > var context = document.getElementById('TransformationSample1').getContext('2d'); > // prepare the settings for color and font styles > context.fillStyle = 'red'; > context.strokeStyle = 'black'; > context.font = '40px Arial'; > // 1. draw the first red rectangle with text > context.fillRect (0, 5, 150, 40); > context.strokeText ('1. Hello', 5, 40); > // 2. declare the translation and draw the same rectangle, again > context.transform (0.5, 0.4, -0.2, 1.2, 200, 0); > context.fillRect (0, 5, 150, 40); > context.strokeText ('2. Hello', 5, 40); ### `ShearTransform1` > var context = document.getElementById('ShearTransform1').getContext('2d'); > context.addShearedGrid(0.5,0); ### `ShearTransform2` > var context = document.getElementById('ShearTransform2').getContext('2d'); > context.addShearedGrid(0,0.2); ### `ShearTransform3` > var context = document.getElementById('ShearTransform3').getContext('2d'); > context.addShearedGrid(0.5,0.2); ### `RotatedHallo1` > var context = document.getElementById('RotatedHallo1').getContext('2d'); > // Transformation: 1. rotate, 2. translate > context.rotate (1.5*Math.PI); // rotation of 270 degree > context.translate (-255,0); > // draw the "HELLO" box > context.fillStyle = 'red'; > context.fillRect (0, 0, 255, 120); > context.fillStyle = 'yellow'; > context.fillRect (5, 5, 245, 110); > context.fillStyle = 'red'; > context.font = "50pt Arial"; > context.lineWidth = 5.0; > context.fillText ("HELLO!", 10, 85); ### `TurnLeftGrid1` > var context = document.getElementById('TurnLeftGrid1').getContext('2d'); > context.addStandardGrid(); ### `TurnLeftGrid2` > var context = document.getElementById('TurnLeftGrid2').getContext('2d'); > context.addTransGrid (0,-1,1,0,0,150); ### `TurnLeftGrid3` > var context = document.getElementById('TurnLeftGrid3').getContext('2d'); > context.addRotatedGrid (1.5*Math.PI); ### `TurnLeftGrid4` > var context = document.getElementById('TurnLeftGrid4').getContext('2d'); > context.addTransGrid (0,-1,1,0,0,150); ### `RotatedHallo2` > var context = document.getElementById('RotatedHallo2').getContext('2d'); > context.addTransGrid (0,-1,1,0,0,255); ### `RotatedHallo3` > var context = document.getElementById('RotatedHallo3').getContext('2d'); > // Transformation: 1. rotate, 2. translate > context.rotate (1.5*Math.PI); > context.translate (-255,0); > // draw the "HELLO" box > context.fillStyle = 'red'; > context.fillRect (0, 0, 255, 120); > context.fillStyle = 'yellow'; > context.fillRect (5, 5, 245, 110); > context.fillStyle = 'red'; > context.font = "50pt Arial"; > context.lineWidth = 5.0; > context.fillText ("HELLO!", 10, 85); ### `RotatedHalloImage1` > var context = document.getElementById('RotatedHalloImage1').getContext('2d'); > // 1. The vertical text box > // 1.a) Two transformations: first a rotation, then a translation > context.rotate (1.5 * Math.PI); > context.translate (-255,0); > // 1.b) The code for the text box > context.fillStyle = 'red'; > context.fillRect (0, 0, 255, 120); > context.fillStyle = 'yellow'; > context.fillRect (5, 5, 245, 110); > context.fillStyle = 'red'; > context.font = "50pt Arial"; > context.lineWidth = 5.0; > context.fillText ("HELLO!", 10, 85); > // Reset the current transformation > context.setTransform (1,0,0,1,0,0); > // 2. The mirror image of the horse > // 2.a) Two transformations: first mirror at the y-axis, then a translation > context.scale (-1, 1); > context.translate (-300,0); > // 2.b) Insert the image > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 0, 0, 180, 255); ### `ImageSample123` > var context = document.getElementById('ImageSample123').getContext('2d'); > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 0, 0, 180, 255); ### `ScalingImage2` > var context = document.getElementById('ScalingImage2').getContext('2d'); > context.addTransGrid (-1,0,0,1,300,0); // should be (-1,0,0,1,-300,0) as the result of the composition. ### `ScalingImage3` > var context = document.getElementById('ScalingImage3').getContext('2d'); > context.scale (-1, 1); > context.translate(-300,0); > //context.transform(-1,0,0,1,300,0); > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 0, 0, 180, 255); ### `RotatedHalloImage1Again` > var context = document.getElementById('RotatedHalloImage1Again').getContext('2d'); > context.drawImage (document.getElementById ('RotatedHalloImage1'), 0, 0); ### `RotatedHalloImage2` > var context = document.getElementById('RotatedHalloImage2').getContext('2d'); > // 1. The vertical text box > // 1.a) Two transformations: first a rotation, then a translation > context.rotate (1.5 * Math.PI); > context.translate (-255,0); > // 1.b) The code for the text box > context.fillStyle = 'red'; > context.fillRect (0, 0, 255, 120); > context.fillStyle = 'yellow'; > context.fillRect (5, 5, 245, 110); > context.fillStyle = 'red'; > context.font = "50pt Arial"; > context.lineWidth = 5.0; > context.fillText ("HELLO!", 10, 85); > // 2. The mirror image of the horse > // 2.a) Two transformations: first mirror at the y-axis, then a translation > context.scale (-1, 1); > context.translate (-300,0); > // 2.b) Insert the image > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 0, 0, 180, 255); ### `GlobalAlphaSample1` > var context = document.getElementById('GlobalAlphaSample1').getContext('2d'); > context.globalAlpha = 1.0; > context.font = '20px Arial'; context.strokeStyle = 'black'; // settings for the text style > context.fillStyle = 'red'; context.fillRect( 10,10,150,100); context.strokeText('red', 20, 50); > context.fillStyle = 'green'; context.fillRect(110,30,150,100); context.strokeText('green', 120, 80); > context.fillStyle = 'yellow'; context.fillRect(210,50,150,100); context.strokeText('yellow',220,110); > context.fillStyle = 'blue'; context.fillRect(310,70,150,100); context.strokeText('blue', 320,140); ### `GlobalAlphaSample2` > var context = document.getElementById('GlobalAlphaSample2').getContext('2d'); > context.globalAlpha = 0.5; > context.font = '20px Arial'; context.strokeStyle = 'black'; // settings for the text style > context.fillStyle = 'red'; context.fillRect( 10,10,150,100); context.strokeText('red', 20, 50); > context.fillStyle = 'green'; context.fillRect(110,30,150,100); context.strokeText('green', 120, 80); > context.fillStyle = 'yellow'; context.fillRect(210,50,150,100); context.strokeText('yellow',220,110); > context.fillStyle = 'blue'; context.fillRect(310,70,150,100); context.strokeText('blue', 320,140); ### `GlobalAlphaSample3` > var context = document.getElementById('GlobalAlphaSample3').getContext('2d'); > context.globalAlpha = 0.1; > context.font = '20px Arial'; context.strokeStyle = 'black'; // settings for the text style > context.fillStyle = 'red'; context.fillRect( 10,10,150,100); context.strokeText('red', 20, 50); > context.fillStyle = 'green'; context.fillRect(110,30,150,100); context.strokeText('green', 120, 80); > context.fillStyle = 'yellow'; context.fillRect(210,50,150,100); context.strokeText('yellow',220,110); > context.fillStyle = 'blue'; context.fillRect(310,70,150,100); context.strokeText('blue', 320,140); ### `GlobalCompositeSample` > var context = document.getElementById('GlobalCompositeSample').getContext('2d'); > // 1. add the orange square > context.fillStyle = 'orange'; > context.fillRect (0, 0, 60, 60); > // 2. set the globalCompositeOperation > context.globalCompositeOperation = "source-over"; > // 3. add the cyan circle > context.fillStyle = 'cyan'; > context.arc(54,54,36,0,2*Math.PI,false); > context.fill(); ### `SourceOverSample` > var context = document.getElementById('SourceOverSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "source-over"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `SourceAtopSample` > var context = document.getElementById('SourceAtopSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "source-atop"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `SourceInSample` > var context = document.getElementById('SourceInSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "source-in"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `SourceOutSample` > var context = document.getElementById('SourceOutSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "source-out"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `DestinationOverSample` > var context = document.getElementById('DestinationOverSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "destination-over"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `DestinationAtopSample` > var context = document.getElementById('DestinationAtopSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "destination-atop"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `DestinationInSample` > var context = document.getElementById('DestinationInSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "destination-in"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `DestinationOutSample` > var context = document.getElementById('DestinationOutSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "destination-out"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `LighterSample` > var context = document.getElementById('LighterSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "lighter"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `CopySample` > var context = document.getElementById('CopySample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "copy"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `XorSample` > var context = document.getElementById('XorSample').getContext('2d'); > context.fillStyle = 'orange'; context.fillRect (0, 0, 60, 60); > context.globalCompositeOperation = "xor"; > context.fillStyle = 'cyan'; context.arc(54,54,36,0,2*Math.PI,false); context.fill(); ### `StrokeStyleSample1` > var context = document.getElementById('StrokeStyleSample1').getContext('2d'); > // 1. set strokeStyle to a hexadecimal color value, namely '#008000' (same as 'green') > context.strokeStyle = '#008000'; > // 2. draw a kind of half cirlce on the left > context.beginPath(); > context.moveTo (60, 10); > context.lineTo (60, 110); > context.bezierCurveTo (0, 110, 0, 10, 60, 10); > context.stroke(); > context.closePath(); > // 3. draw a rectangle on the right top > context.strokeRect (80, 10, 230, 30); > // 4. set the text font and write 'Hello!' on the right bottom of the canvas > context.font = '60pt sans-serif'; > context.strokeText ('Hello!', 80, 110); ### `FillStyleSample1` > var context = document.getElementById('FillStyleSample1').getContext('2d'); > // 1. set strokeStyle to a hexadecimal color value, namely '#008000' (same as 'green') > context.fillStyle = '#008000'; > // 2. draw a kind of half cirlce on the left > context.beginPath(); > context.moveTo (60, 10); > context.lineTo (60, 110); > context.bezierCurveTo (0, 110, 0, 10, 60, 10); > context.fill(); > context.closePath(); > // 3. draw a rectangle on the right top > context.fillRect (80, 10, 230, 30); > // 4. set the text font and write 'Hello!' on the right bottom of the canvas > context.font = '60pt sans-serif'; > context.fillText ('Hello!', 80, 110); ### `Rainbow1` > var context = document.getElementById('Rainbow1').getContext('2d'); > var rainbowGradient = context.createLinearGradient (100, 50, 500, 50); > rainbowGradient.addColorStop (0, 'red'); > rainbowGradient.addColorStop (0.25, 'yellow'); > rainbowGradient.addColorStop (0.5, 'green'); > rainbowGradient.addColorStop (0.75, 'blue'); > rainbowGradient.addColorStop (1, 'violet'); > context.fillStyle = rainbowGradient; > context.fillRect (0, 0, 600, 100); ### `Rainbow2` > var context = document.getElementById('Rainbow2').getContext('2d'); > context.addGrid(50); > context.strokeStyle = 'black'; > context.lineWidth = 2.0; > context.textAlign = 'center'; > context.beginPath(); > context.moveTo (100, 50); > context.lineTo (500, 50); > context.arc (100, 50, 3.5, 0, 2*Math.PI, false); > context.arc (500, 50, 3.5, 0, 2*Math.PI, false); > context.stroke(); > context.closePath(); > context.lineWidth = 0.6; > context.font = '14pt sans-serif'; > context.fillText ('createLinearGradient (100, 50, 500, 50)', 300, 30); ### `Rainbow3` > var context = document.getElementById('Rainbow3').getContext('2d'); > context.addGrid(50); > context.strokeStyle = 'black'; > context.lineWidth = 2.0; > context.textAlign = 'center'; > context.beginPath(); > context.moveTo (100, 50); > context.lineTo (500, 50); > context.stroke(); > context.closePath(); > context.beginPath(); > context.fillStyle = 'red'; context.arc (100, 50, 3.5, 0, 2*Math.PI, false); > context.fill(); > context.closePath(); > context.beginPath(); > context.fillStyle = 'yellow'; context.arc (200, 50, 3.5, 0, 2*Math.PI, false); > context.fill(); > context.closePath(); > context.beginPath(); > context.fillStyle = 'green'; context.arc (300, 50, 3.5, 0, 2*Math.PI, false); > context.fill(); > context.closePath(); > context.beginPath(); > context.fill(); > context.closePath(); > context.beginPath(); > context.fillStyle = 'blue'; context.arc (400, 50, 3.5, 0, 2*Math.PI, false); > context.fill(); > context.closePath(); > context.beginPath(); > context.fillStyle = 'violet'; context.arc (500, 50, 3.5, 0, 2*Math.PI, false); > context.fill(); > context.closePath(); > context.fillStyle = 'black'; > context.lineWidth = 0.6; > context.font = '14pt sans-serif'; > context.fillText ('addColorStop', 300, 30); > context.font = '8pt sans-serif'; > context.fillText ('0', 100, 70); > context.fillText ('0.25', 200, 70); > context.fillText ('0.5', 300, 70); > context.fillText ('0.75', 400, 70); > context.fillText ('1', 500, 70); > context.fillText ("'red'", 100, 90); > context.fillText ("'yellow'", 200, 90); > context.fillText ("'green'", 300, 90); > context.fillText ("'blue'", 400, 90); > context.fillText ("'violet'", 500, 90); ### `RainbowStrokeStyleSample1` > var context = document.getElementById('RainbowStrokeStyleSample1').getContext('2d'); > // 1. set strokeStyle to a linear gradient value > var rainbowGradient = context.createLinearGradient (0, 60, 320, 60); > rainbowGradient.addColorStop (0, 'red'); > rainbowGradient.addColorStop (0.25, 'yellow'); > rainbowGradient.addColorStop (0.5, 'green'); > rainbowGradient.addColorStop (0.75, 'blue'); > rainbowGradient.addColorStop (1, 'violet'); > context.strokeStyle = rainbowGradient; > // 2. draw a kind of half cirlce on the left > context.beginPath(); > context.moveTo (60, 10); > context.lineTo (60, 110); > context.bezierCurveTo (0, 110, 0, 10, 60, 10); > context.stroke(); > context.closePath(); > // 3. draw a rectangle on the right top > context.strokeRect (80, 10, 230, 30); > // 4. set the text font and write 'Hello!' on the right bottom of the canvas > context.font = '60pt sans-serif'; > context.strokeText ('Hello!', 80, 110); ### `RadialSample` > var context = document.getElementById('RadialSample').getContext('2d'); > // 1. create a radial gradient > var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110); > // 2. add colors > rg.addColorStop (0, 'yellow'); > rg.addColorStop (1, 'red'); > // 3. set the fill style to the new gradient > context.fillStyle = rg; > // 4. now draw some filled objects; in this case just a circle > context.beginPath(); > context.arc (120,120,110,0,2*Math.PI,false); > context.fill(); > context.closePath(); ### `RadialSample1` > var context = document.getElementById('RadialSample1').getContext('2d'); > context.addGrid(20); > context.strokeStyle = 'black'; > context.lineWidth = 2.0; > context.beginPath(); > context.arc (80,80,20,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.beginPath(); > context.arc (120,120,110,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.textAlign = 'center'; > context.fillText ('start', 80, 110); > context.fillText ('end', 205, 210); ### `RadialSample2` > var context = document.getElementById('RadialSample2').getContext('2d'); > context.addGrid(20); > context.strokeStyle = 'black'; > context.lineWidth = 2.0; > context.beginPath(); > context.arc (80,80,20,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.beginPath(); > context.arc (90,90,42.5,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.beginPath(); > context.arc (100,100,65,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.beginPath(); > context.arc (110,110,87.5,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.beginPath(); > context.arc (120,120,110,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.fillText ('0.0', 90, 110); > context.fillText ('0.25', 125, 130); > context.fillText ('0.5', 160, 150); > context.fillText ('0.75', 185, 170); > context.fillText ('1.0', 220, 190); ### `RadialSample3` > var context = document.getElementById('RadialSample3').getContext('2d'); > context.addGrid(20); > context.strokeStyle = 'black'; > context.lineWidth = 5.0; > context.strokeStyle = 'yellow'; > context.beginPath(); > context.arc (80,80,20,0,2*Math.PI,false); > context.stroke(); > context.closePath(); > context.strokeStyle = 'red'; > context.beginPath(); > context.arc (120,120,110,0,2*Math.PI,false); > context.stroke(); > context.closePath(); ### `RadialSample4` > var context = document.getElementById('RadialSample4').getContext('2d'); > context.addGrid(20); > // 1. create a radial gradient > var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110); > // 2. add colors > rg.addColorStop (0, 'yellow'); > rg.addColorStop (1, 'red'); > // 3. set the fill style to the new gradient > context.fillStyle = rg; > context.beginPath(); > context.arc (120,120,110,0,2*Math.PI,false); > context.fill(); > context.closePath(); ### `RadialSample8` > var context = document.getElementById('RadialSample8').getContext('2d'); > // 1. create a radial gradient > var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110); > // 2. add colors > rg.addColorStop (0, 'yellow'); > rg.addColorStop (1, 'red'); > // 3. set the fill style to the new gradient > context.fillStyle = rg; > // 4. now draw some filled objects; > context.fillRect (0, 0, 240, 240); ### `RadialSample9` > var context = document.getElementById('RadialSample9').getContext('2d'); > // 1. create a radial gradient > var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110); > // 2. add colors > rg.addColorStop (0, 'white'); > rg.addColorStop (1, 'black'); > // 3. set the fill style to the new gradient > context.fillStyle = rg; > // 4. now draw some filled objects; > context.fillRect (0, 0, 240, 240); ### `RadialSample7` > var context = document.getElementById('RadialSample7').getContext('2d'); > // 1. create a radial gradient > var rg = context.createRadialGradient (80, 80, 20, 120, 120, 110); > // 2. add colors > rg.addColorStop (0, 'red'); > rg.addColorStop (0.25, 'yellow'); > rg.addColorStop (0.5, 'green'); > rg.addColorStop (0.75, 'blue'); > rg.addColorStop (1, 'violet'); > // 3. set the fill style to the new gradient > context.fillStyle = rg; > // 4. now draw some filled objects; > context.fillRect (0, 0, 240, 240); ### `RadialGradient1` > var context = document.getElementById('RadialGradient1').getContext('2d'); > context.addGrid(); > var rainbowGradient = context.createRadialGradient (100, 100, 10, 100, 100, 75); > rainbowGradient.addColorStop (0, 'orange'); > rainbowGradient.addColorStop (1, 'cyan'); > context.fillStyle = rainbowGradient; > context.fillRect (0, 0, 200, 200); ### `RadialGradient2` > var context = document.getElementById('RadialGradient2').getContext('2d'); > context.addGrid(); > var rainbowGradient = context.createRadialGradient (80, 80, 10, 120, 120, 75); > rainbowGradient.addColorStop (0, 'orange'); > rainbowGradient.addColorStop (1, 'cyan'); > context.fillStyle = rainbowGradient; > context.fillRect (0, 0, 200, 200); ### `RadialGradient3` > var context = document.getElementById('RadialGradient3').getContext('2d'); > context.addGrid(); > var rainbowGradient = context.createRadialGradient (50, 50, 50, 150, 150, 50); > rainbowGradient.addColorStop (0, 'orange'); > rainbowGradient.addColorStop (1, 'cyan'); > context.fillStyle = rainbowGradient; > context.fillRect (0, 0, 200, 200); ### `RadialGradient4` > var context = document.getElementById('RadialGradient4').getContext('2d'); > context.addGrid(); > var rainbowGradient = context.createRadialGradient (30, 30, 10, 150, 150, 50); > rainbowGradient.addColorStop (0, 'orange'); > rainbowGradient.addColorStop (1, 'cyan'); > context.fillStyle = rainbowGradient; > context.fillRect (0, 0, 200, 200); ### `RadialGradientCircles1` > var context = document.getElementById('RadialGradientCircles1').getContext('2d'); > context.addGrid(); > context.lineWidth = 5.0; > // orange circle > context.strokeStyle = 'orange'; > context.beginPath(); > context.arc (100, 100, 10, 0, 2 * Math.PI, false); > context.stroke(); > context.closePath(); > // cyan circle > context.strokeStyle = 'cyan'; > context.beginPath(); > context.arc (100, 100, 75, 0, 2 * Math.PI, false); > context.stroke(); ### `RadialGradientCircles2` > var context = document.getElementById('RadialGradientCircles2').getContext('2d'); > context.addGrid(); > context.lineWidth = 5.0; > // orange circle > context.strokeStyle = 'orange'; > context.beginPath(); > context.arc (80, 80, 10, 10, 0, 2 * Math.PI, false); > context.stroke(); > context.closePath(); > // cyan circle > context.strokeStyle = 'cyan'; > context.beginPath(); > context.arc (120, 120, 75, 0, 2 * Math.PI, false); > context.stroke(); ### `RadialGradientCircles3` > var context = document.getElementById('RadialGradientCircles3').getContext('2d'); > context.addGrid(); > context.lineWidth = 5.0; > // orange circle > context.strokeStyle = 'orange'; > context.beginPath(); > context.arc (50, 50, 50, 0, 2 * Math.PI, false); > context.stroke(); > context.closePath(); > // cyan circle > context.strokeStyle = 'cyan'; > context.beginPath(); > context.arc (150, 150, 50, 0, 2 * Math.PI, false); > context.stroke(); ### `RadialGradientCircles4` > var context = document.getElementById('RadialGradientCircles4').getContext('2d'); > context.addGrid(); > context.lineWidth = 5.0; > // orange circle > context.strokeStyle = 'orange'; > context.beginPath(); > context.arc (30, 30, 10, 10, 0, 2 * Math.PI, false); > context.stroke(); > context.closePath(); > // cyan circle > context.strokeStyle = 'cyan'; > context.beginPath(); > context.arc (150, 150, 50, 0, 2 * Math.PI, false); > context.stroke(); ### `CreatePatternSample1` > var context = document.getElementById('CreatePatternSample1').getContext('2d'); > // create an Image object from the grayhorse.jpg file > var horseImage = new Image (); > horseImage.src = 'grayhorse.jpg'; > // create a CanvasPattern object with this image and make that the new fillStyle value > var horsePattern = context.createPattern (horseImage, 'repeat'); > context.fillStyle = horsePattern; > // Now draw same objects: first a rectangle > context.fillRect (0, 0, 200, 210); > // then a triangle > context.beginPath(); > context.moveTo (220, 0); > context.lineTo (220, 100); > context.lineTo (550, 50); > context.lineTo (220, 0); > context.fill(); > context.closePath(); > // and finally write "Hello!" > context.font = '120px sans-serif'; > context.fillText ('Hello!', 210, 200); ### `LineWidthSample1` > var context = document.getElementById('LineWidthSample1').getContext('2d'); > //context.addGrid(20); > context.strokeStyle = 'black'; > context.textAlign = 'center'; > context.lineWidth = 0.1; > context.beginPath(); context.moveTo (20, 25); context.lineTo (20, 100); context.stroke(); > context.fillText ('0.1', 20, 125); > context.lineWidth = 0.2; > context.beginPath(); context.moveTo (60, 25); context.lineTo (60, 100); context.stroke(); > context.fillText ('0.2', 60, 125); > context.lineWidth = 0.3; > context.beginPath(); context.moveTo (100, 25); context.lineTo (100, 100); context.stroke(); > context.fillText ('0.3', 100, 125); > context.lineWidth = 0.4; > context.beginPath(); context.moveTo (140, 25); context.lineTo (140, 100); context.stroke(); > context.fillText ('0.4', 140, 125); > context.lineWidth = 0.5; > context.beginPath(); context.moveTo (180, 25); context.lineTo (180, 100); context.stroke(); > context.fillText ('0.5', 180, 125); > context.lineWidth = 0.6; > context.beginPath(); context.moveTo (220, 25); context.lineTo (220, 100); context.stroke(); > context.fillText ('0.6', 220, 125); > context.lineWidth = 0.7; > context.beginPath(); context.moveTo (260, 25); context.lineTo (260, 100); context.stroke(); > context.fillText ('0.7', 260, 125); > context.lineWidth = 0.8; > context.beginPath(); context.moveTo (300, 25); context.lineTo (300, 100); context.stroke(); > context.fillText ('0.8', 300, 125); > context.lineWidth = 0.9; > context.beginPath(); context.moveTo (340, 25); context.lineTo (340, 100); context.stroke(); > context.fillText ('0.9', 340, 125); > context.lineWidth = 1.0; > context.beginPath(); context.moveTo (380, 25); context.lineTo (380, 100); context.stroke(); > context.fillText ('1.0', 380, 125); > context.lineWidth = 1.5; > context.beginPath(); context.moveTo (420, 25); context.lineTo (420, 100); context.stroke(); > context.fillText ('1.5', 420, 125); > context.lineWidth = 2.0; > context.beginPath(); context.moveTo (460, 25); context.lineTo (460, 100); context.stroke(); > context.fillText ('2.0', 460, 125); > context.lineWidth = 3.0; > context.beginPath(); context.moveTo (500, 25); context.lineTo (500, 100); context.stroke(); > context.fillText ('3.0', 500, 125); > context.lineWidth = 4.0; > context.beginPath(); context.moveTo (540, 25); context.lineTo (540, 100); context.stroke(); > context.fillText ('4.0', 540, 125); > context.lineWidth = 5.0; > context.beginPath(); context.moveTo (580, 25); context.lineTo (580, 100); context.stroke(); > context.fillText ('5.0', 580, 125); > context.lineWidth = 10.0; > context.beginPath(); context.moveTo (620, 25); context.lineTo (620, 100); context.stroke(); > context.fillText ('10.0', 620, 125); > context.lineWidth = 20.0; > context.beginPath(); context.moveTo (660, 25); context.lineTo (660, 100); context.stroke(); > context.fillText ('20.0', 660, 125); ### `LineWidthCanvas1` > var context = document.getElementById('LineWidthCanvas1').getContext('2d'); > //context.addGrid(20); > context.fillStyle = 'blue'; > context.strokeStyle = 'blue'; > context.textAlign = 'right'; > context.textBaseline = 'middle'; > context.fillText ('0', 15, 20); > context.fillText ('1', 15, 40); > context.fillText ('2', 15, 60); > context.fillText ('3', 15, 80); > context.fillText ('4', 15,100); > context.textAlign = 'center'; > context.fillText ( '0', 20, 15); > context.fillText ( '1', 40, 15); > context.fillText ( '2', 60, 15); > context.fillText ( '3', 80, 15); > context.fillText ( '4',100, 15); > context.fillText ( '5',120, 15); > context.fillText ( '6',140, 15); > context.fillText ( '7',160, 15); > context.fillText ( '8',180, 15); > context.fillText ( '9',200, 15); > context.fillText ('10',220, 15); > context.beginPath (); > context.moveTo ( 19, 20); > context.lineTo (220, 20); > context.moveTo ( 19, 40); > context.lineTo (220, 40); > context.moveTo ( 19, 60); > context.lineTo (220, 60); > context.moveTo ( 19, 80); > context.lineTo (220, 80); > context.moveTo ( 19,100); > context.lineTo (220,100); > context.moveTo ( 20, 19); > context.lineTo ( 20,100); > context.moveTo ( 40, 19); > context.lineTo ( 40,100); > context.moveTo ( 60, 19); > context.lineTo ( 60,100); > context.moveTo ( 80, 19); > context.lineTo ( 80,100); > context.moveTo (100, 19); > context.lineTo (100,100); > context.moveTo (120, 19); > context.lineTo (120,100); > context.moveTo (140, 19); > context.lineTo (140,100); > context.moveTo (160, 19); > context.lineTo (160,100); > context.moveTo (180, 19); > context.lineTo (180,100); > context.moveTo (200, 19); > context.lineTo (200,100); > context.moveTo (220, 19); > context.lineTo (220,100); > context.stroke(); > context.closePath (); > // red line with two bullets at the end > context.strokeStyle = 'red'; > context.beginPath(); > context.arc (20,60,2,0,2*Math.PI); > context.arc (220,60,2,0,2*Math.PI); > context.moveTo (20,60); > context.lineTo (220, 60); > context.stroke(); > context.closePath(); > // black and gray "line" with text underneath > context.fillStyle = 'rgba(110,110,110,0.6)'; //'#DDDDDD'; > context.fillRect (20, 40, 200, 40); > context.fillStyle = 'rgba(0,0,0,0.6)'; > context.fillRect (20, 50, 200, 20); > context.fillStyle = 'black'; > context.fillText ('black line of width 1.0 from (0,2) to (10,2)', 125, 120); ### `LineWidthCanvas2` > var context = document.getElementById('LineWidthCanvas2').getContext('2d'); > //context.addGrid(20); > context.fillStyle = 'blue'; > context.strokeStyle = 'blue'; > context.textAlign = 'right'; > context.textBaseline = 'middle'; > context.fillText ('0', 15, 20); > context.fillText ('1', 15, 40); > context.fillText ('2', 15, 60); > context.fillText ('3', 15, 80); > context.fillText ('4', 15,100); > context.textAlign = 'center'; > context.fillText ( '0', 20, 15); > context.fillText ( '1', 40, 15); > context.fillText ( '2', 60, 15); > context.fillText ( '3', 80, 15); > context.fillText ( '4',100, 15); > context.fillText ( '5',120, 15); > context.fillText ( '6',140, 15); > context.fillText ( '7',160, 15); > context.fillText ( '8',180, 15); > context.fillText ( '9',200, 15); > context.fillText ('10',220, 15); > context.beginPath (); > context.moveTo ( 19, 20); > context.lineTo (220, 20); > context.moveTo ( 19, 40); > context.lineTo (220, 40); > context.moveTo ( 19, 60); > context.lineTo (220, 60); > context.moveTo ( 19, 80); > context.lineTo (220, 80); > context.moveTo ( 19,100); > context.lineTo (220,100); > context.moveTo ( 20, 19); > context.lineTo ( 20,100); > context.moveTo ( 40, 19); > context.lineTo ( 40,100); > context.moveTo ( 60, 19); > context.lineTo ( 60,100); > context.moveTo ( 80, 19); > context.lineTo ( 80,100); > context.moveTo (100, 19); > context.lineTo (100,100); > context.moveTo (120, 19); > context.lineTo (120,100); > context.moveTo (140, 19); > context.lineTo (140,100); > context.moveTo (160, 19); > context.lineTo (160,100); > context.moveTo (180, 19); > context.lineTo (180,100); > context.moveTo (200, 19); > context.lineTo (200,100); > context.moveTo (220, 19); > context.lineTo (220,100); > context.stroke(); > context.closePath (); > // red line with two bullets at the end > context.strokeStyle = 'red'; > context.beginPath(); > context.arc (20,50,2,0,2*Math.PI); > context.arc (220,50,2,0,2*Math.PI); > context.moveTo (20,50); > context.lineTo (220, 50); > context.stroke(); > context.closePath(); > // black and gray "line" with text underneath > context.fillStyle = 'rgba(0,0,0,0.6)'; > context.fillRect (20, 40, 200, 20); > context.fillStyle = 'black'; > context.fillText ('black line of width 1.0 from (0,1.5) to (10,1.5)', 125, 120); ### `LineCapSample1` > var context = document.getElementById('LineCapSample1').getContext('2d'); > // orange border line > context.strokeStyle = 'orange'; > context.beginPath(); > context.moveTo (0, 25); > context.lineTo (530, 25); > context.moveTo (0, 100); > context.lineTo (530, 100); > context.stroke(); > context.closePath(); > // optional grid > //context.addGrid (25); > // settings for the lines and text > context.font = '12pt sans-serif'; > context.textAlign = 'center'; > context.strokeStyle = 'black'; > // left "butt" example > context.fillText ("'butt' (default)", 60, 135); > context.lineCap = 'butt'; > context.lineWidth = 5.0; > context.beginPath(); context.moveTo (25, 25); context.lineTo (25, 100); context.stroke(); > context.lineWidth = 10.0; > context.beginPath(); context.moveTo (60, 25); context.lineTo (60, 100); context.stroke(); > context.lineWidth = 20.0; > context.beginPath(); context.moveTo (100, 25); context.lineTo (100, 100); context.stroke(); > // middle "round" example > context.fillText ("'round'", 260, 135); > context.lineCap = 'round'; > context.lineWidth = 5.0; > context.beginPath(); context.moveTo (225, 25); context.lineTo (225, 100); context.stroke(); > context.lineWidth = 10.0; > context.beginPath(); context.moveTo (260, 25); context.lineTo (260, 100); context.stroke(); > context.lineWidth = 20.0; > context.beginPath(); context.moveTo (300, 25); context.lineTo (300, 100); context.stroke(); > // right "square" example > context.fillText ("'square'" , 460, 135); > context.lineCap = 'square'; > context.lineWidth = 5.0; > context.beginPath(); context.moveTo (425, 25); context.lineTo (425, 100); context.stroke(); > context.lineWidth = 10.0; > context.beginPath(); context.moveTo (460, 25); context.lineTo (460, 100); context.stroke(); > context.lineWidth = 20.0; > context.beginPath(); context.moveTo (500, 25); context.lineTo (500, 100); context.stroke(); ### `LineJoinRound` > var context = document.getElementById('LineJoinRound').getContext('2d'); > context.scale (0.5, 0.5); > context.lineWidth = 1.0; > context.strokeStyle = 'orange'; > context.beginPath (); > context.moveTo ( 0, 50); > context.lineTo (600, 50); > context.moveTo ( 0, 150); > context.lineTo (600, 150); > context.stroke (); > context.closePath (); > context.font = "16pt sans-serif"; > context.strokeStyle = 'black'; > context.fillText ("lineJoin = 'round'", 25, 25); > context.lineJoin = 'round'; > context.lineWidth = 20.0; > context.beginPath (); > context.moveTo ( 30, 100); > context.lineTo (200, 150); > context.lineTo (300, 50); > context.lineTo (380, 150); > context.lineTo (440, 50); > context.lineTo (480, 150); > context.lineTo (510, 50); > context.lineTo (530, 150); > context.lineTo (546, 50); > context.lineTo (560, 150); > context.lineTo (570, 100); > context.stroke (); ### `LineJoinBevel` > var context = document.getElementById('LineJoinBevel').getContext('2d'); > context.scale (0.5, 0.5); > context.lineWidth = 1.0; > context.strokeStyle = 'orange'; > context.beginPath (); > context.moveTo ( 0, 50); > context.lineTo (600, 50); > context.moveTo ( 0, 150); > context.lineTo (600, 150); > context.stroke (); > context.closePath (); > context.font = "16pt sans-serif"; > context.strokeStyle = 'black'; > context.fillText ("lineJoin = 'bevel'", 25, 25); > context.lineJoin = 'bevel'; > context.lineWidth = 20.0; > context.beginPath (); > context.moveTo ( 30, 100); > context.lineTo (200, 150); > context.lineTo (300, 50); > context.lineTo (380, 150); > context.lineTo (440, 50); > context.lineTo (480, 150); > context.lineTo (510, 50); > context.lineTo (530, 150); > context.lineTo (546, 50); > context.lineTo (560, 150); > context.lineTo (570, 100); > context.stroke (); ### `LineJoinMiter` > var context = document.getElementById('LineJoinMiter').getContext('2d'); > context.scale (0.5, 0.5); > context.lineWidth = 1.0; > context.strokeStyle = 'orange'; > context.beginPath (); > context.moveTo ( 0, 50); > context.lineTo (600, 50); > context.moveTo ( 0, 150); > context.lineTo (600, 150); > context.stroke (); > context.closePath (); > context.font = "16pt sans-serif"; > context.strokeStyle = 'black'; > context.fillText ("lineJoin = 'miter'", 25, 25); > context.lineJoin = 'miter'; > context.lineWidth = 20.0; > context.beginPath (); > context.moveTo ( 30, 100); > context.lineTo (200, 150); > context.lineTo (300, 50); > context.lineTo (380, 150); > context.lineTo (440, 50); > context.lineTo (480, 150); > context.lineTo (510, 50); > context.lineTo (530, 150); > context.lineTo (546, 50); > context.lineTo (560, 150); > context.lineTo (570, 100); > context.stroke (); ### `MiterLimitCanvas1` > var context = document.getElementById('MiterLimitCanvas1').getContext('2d'); > //context.addGrid(); > // add the text > context.textAlign = 'center'; > context.lineWidth = 1.0; > context.font = '10pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ("lineWidth = 25.0", 75, 25); > context.fillText ("miterLimit = 20.0", 75, 45); > context.fillText ("lineWidth = 25.0", 275, 25); > context.fillText ("miterLimit = 1.0", 275, 45); > // set lineJoin to miter (which is actually the default) > context.lineJoin = 'miter'; > // left example > context.miterLimit = 20.0; > context.strokeStyle = 'black'; > context.lineWidth = 25.0; > context.beginPath(); > context.moveTo (25, 225); > context.lineTo (75, 100); > context.lineTo (125, 225); > context.stroke(); > context.closePath(); > context.strokeStyle = 'orange'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (25, 225); > context.lineTo (75, 100); > context.lineTo (125, 225); > context.stroke(); > context.closePath(); > // right example > context.miterLimit = 1.0; > context.strokeStyle = 'black'; > context.lineWidth = 25.0; > context.beginPath(); > context.moveTo (225, 225); > context.lineTo (275, 100); > context.lineTo (325, 225); > context.stroke(); > context.closePath(); > context.strokeStyle = 'orange'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (225, 225); > context.lineTo (275, 100); > context.lineTo (325, 225); > context.stroke(); > context.closePath(); > // upper and lower orange border lines > context.strokeStyle = 'orange'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (0, 67); > context.lineTo (350, 67); > context.moveTo (0, 135); > context.lineTo (350, 135); > context.stroke(); > context.closePath(); ### `ShadowSample0` > var context = document.getElementById("ShadowSample0").getContext("2d"); > // General settings > context.font = '40pt Arial'; // sets the font > context.lineWidth = '5' // sets the line width for the strokeRect() calls below > context.strokeStyle = 'green' // sets the color for the strokeRect() calls below > context.fillStyle = 'red'; // sets the color for the fillText() and fillRect() calls below > // #1 column with default (= no) shadow > context.fillText ("# 1", 25, 45); > context.fillRect (25, 70, 100, 100); > context.strokeRect (25, 200, 100, 100); > // #2 column > context.shadowOffsetX = 15; // shadow appears 15 pixel to the right > context.shadowOffsetY = 15; // shadow appears 15 pixel to the botttom > context.shadowColor = 'orange'; // shadow color now is 'orange' > context.shadowBlur = 0; // zero blur: this is a crisp shadow > context.fillText ("# 2", 225, 45); > context.fillRect (225, 70, 100, 100); > context.strokeRect (225, 200, 100, 100); > // #3 column > context.shadowOffsetX = 15; // again, lets shadows appear 15 pixel to the right > context.shadowOffsetY = 15; // ... and 15 pixel to the bottom > context.shadowColor = 'rgba(0,0,0,0.5)'; // shadow color is black, but half transparent > context.shadowBlur = 5; // shadow is blurred > context.fillText ("# 3", 425, 45); > context.fillRect (425, 70, 100, 100); > context.strokeRect (425, 200, 100, 100); ### `ShadowOffsetXSample` > var context = document.getElementById("ShadowOffsetXSample").getContext('2d'); > // settings for the use of fillText below > context.fillStyle = 'black'; > context.font = '40pt Arial'; > // set the shadow color to a visible 'orange' > context.shadowColor = 'orange'; > // #1 text with horizontal shadow offset 0 (i.e. shadow behind the text and thus invisible) > context.shadowOffsetX = 0; > context.fillText ("#1", 50, 50); > // #2 text with horizontal shadow offset 10 (i.e. 10 pixel to the right) > context.shadowOffsetX = 10; > context.fillText ("#2", 200, 50); > // #3 text with horizontal shadow offset -10 (i.e. 10 pixel to the left) > context.shadowOffsetX = -10; > context.fillText ("#3", 350, 50); > // #4 text with horizontal shadow offset 75 (i.e. 75 pixel to the right) > context.shadowOffsetX = 75; > context.fillText ("#4", 500, 50); ### `ShadowOffsetYSample` > var context = document.getElementById("ShadowOffsetYSample").getContext('2d'); > // settings for the use of fillText below > context.fillStyle = 'black'; > context.font = '40pt Arial'; > // set the shadow color to a visible 'orange' > context.shadowColor = 'orange'; > // #1 text with vertical shadow offset 0 (i.e. shadow behind the text and thus invisible) > context.shadowOffsetY = 0; > context.fillText ("#1", 50, 50); > // #2 text with vertical shadow offset 10 (i.e. 10 pixel down) > context.shadowOffsetY = 10; > context.fillText ("#2", 200, 50); > // #3 text with vertical shadow offset -10 (i.e. 10 pixel up) > context.shadowOffsetY = -10; > context.fillText ("#3", 350, 50); > // #4 text with vertical shadow offset 75 (i.e. 75 pixel down) > context.shadowOffsetY = 75; > context.fillText ("#4", 500, 50); ### `ShadowBlurSample1` > var context = document.getElementById("ShadowBlurSample1").getContext('2d'); > // settings for the use of fillText below > context.fillStyle = 'black'; > context.font = '40pt Arial'; > // set the shadow color to a visible 'orange' and the x- and y-offset to 15 > context.shadowColor = 'orange'; > context.shadowOffsetX = 15; > context.shadowOffsetY = 15; > // #1 > context.shadowBlur = 0; > context.fillText ("#1", 50, 50); > // #2 > context.shadowBlur = 2; > context.fillText ("#2", 200, 50); > // #3 > context.shadowBlur = 4; > context.fillText ("#3", 350, 50); > // #4 > context.shadowBlur = 8; > context.fillText ("#4", 500, 50); ### `ShadowBlurSample2` > var context = document.getElementById("ShadowBlurSample2").getContext('2d'); > // text settings > context.font = '28pt Arial'; > context.fillStyle = 'red'; > // shadow settings > context.shadowColor = 'blue'; > context.shadowBlur = 5; > context.shadowOffsetX = 0; > context.shadowOffsetY = 0; > // add the text > context.fillText ("shadow: blur 5, color blue, x- and y-offset 0", 20, 50); ### `ShadowColorSample` > var context = document.getElementById("ShadowColorSample").getContext('2d'); > // settings for the use of fillText below > context.fillStyle = 'black'; > context.font = '40pt Arial'; > // set the shadow color to a visible 'orange' and the x- and y-offset to 15 > context.shadowBlur = 3; > context.shadowOffsetX = 15; > context.shadowOffsetY = 15; > // #1 > context.shadowColor = 'aqua'; > context.fillText ("#1", 50, 50); > // #2 > context.shadowColor = 'rgba(0%,0%,0%,0.5)'; > context.fillText ("#2", 200, 50); > // #3 > context.shadowColor = '#CCCCCC'; > context.fillText ("#3", 350, 50); > // #4 > context.shadowColor = 'hsl(120,50%,50%)'; > context.fillText ("#4", 500, 50); ### `FillRectSample` > var context = document.getElementById('FillRectSample').getContext('2d'); > context.addGrid(); > // 1. draw a filled rectangle in default black > context.fillStyle = 'black'; // this line is actually superfluous, because 'black' is default > context.fillRect(50,50,100,100); // draw the first rectangle > > // 2. draw a filled rectangle in redd > context.fillStyle = 'red'; // change the fillStyle to the color 'red' > context.fillRect(200,50,100,100); // draw the second rectangle > > // 3. draw a fancy rectangle with linear gradient > var lg = context.createLinearGradient(350,50,450,150); // create a linear gradient > lg.addColorStop(0,'yellow'); // start (=0) the gradient with 'yellow' > lg.addColorStop(1,'red'); // finish (=1) the gradient with 'red' > context.fillStyle = lg; // set the fillStyle to this new linear gradient > context.fillRect(350,50,100,100); // draw the third rectangle ### `StrokeRectSample` > var context = document.getElementById('StrokeRectSample').getContext('2d'); > context.addGrid(); > // 1. draw a rectangle with black strokes > context.lineWidth = 1.0; // this is actually superfluous, because 1.0 is default > context.strokeStyle = 'black'; // this is superfluous, too, because 'black' is default anyway > context.strokeRect(50,50,100,100); // draw the first rectangle > > // 2. draw a rectangle with red strokes > context.lineWidth = 7.0; // change the line width to 7.0 > context.strokeStyle = 'red'; // change the strokeStyle to the color 'red' > context.strokeRect(200,50,100,100); // draw the second rectangle > > // 3. draw a rectangle with strokes in gradient style > context.lineWidth = 12.0; // increase the line width, once more > var lg = context.createLinearGradient(350,50,450,150); // define a linear gradient > lg.addColorStop(0,'yellow'); // start the gradient with the color 'yellow' > lg.addColorStop(1,'red'); // let the gradient end with the color 'red' > context.strokeStyle = lg; // set the strokeStyle to this new gradient > context.strokeRect(350,50,100,100); // draw the third rectangle ### `ClearRectSample` > var context = document.getElementById('ClearRectSample').getContext('2d'); > context.addGrid(); > // 1. fill the whole canvas area with a transparent green color > context.fillStyle = 'rgba(0%,100%,0%,0.3)'; // green color with 0.3 transparency > context.fillRect (0,0,300,200); // filled rectangle over the whole canvas area > > // 2. draw a yellow rectangular box > context.lineWidth = 10.0; // set the line width to 10 > context.strokeStyle = 'yellow'; // set the strokeStyle to the color 'yellow' > context.strokeRect(25,25,100,100); // draw the yellow box > > // 3. cut out a rectangle from the canvas > context.clearRect (100,50,200,150); // delete all content in this rectangle ### `DrawRectangle1` > var context = document.getElementById('DrawRectangle1').getContext('2d'); > context.fillStyle = 'rgba(255,0,0,0.5)'; // fill style is now set to a half transparent red color > context.fillRect (80, 20, 100, 60); // draw the rectangle with left upper corner (80,20), width 100 and height 60 ### `DrawRectangle3` > var context = document.getElementById('DrawRectangle3').getContext('2d'); > context.addGrid (20); > context.lineWidth = 2.0; > // first the red line > context.strokeStyle = 'cyan'; > context.beginPath(); > context.moveTo (0, 0); > context.lineTo (80, 20); > context.stroke(); > // then the black rectangle frame > context.strokeStyle = 'black'; > context.beginPath(); > context.moveTo (80, 20); > context.lineTo (180, 20); > context.lineTo (180, 80); > context.lineTo (80, 80); > context.lineTo (80, 20); > context.stroke(); > // add some text > context.fillStyle = 'black' > context.fillText ('1.', 20, 25); > context.fillText ('2.', 125, 15); > context.fillText ('3.', 190, 60); > context.fillText ('4.', 125, 95); > context.fillText ('5.', 65, 60); ### `DrawRectangle4` > var context = document.getElementById('DrawRectangle4').getContext('2d'); > // set the style for the stroke() call below > context.strokeStyle = 'rgba(255,0,0,0.5)'; // now: strokeStyle instead of fillStyle > // the same path again as before: > context.beginPath(); > context.moveTo (80, 20); > context.lineTo (180, 20); > context.lineTo (180, 80); > context.lineTo (80, 80); > context.lineTo (80, 20); > context.stroke(); // now: stroke() insted of fill() > context.closePath(); ### `ClosePathSample1` > var context = document.getElementById('ClosePathSample1').getContext('2d'); > context.addGrid(); > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo(150,25); // starting point at the top of the triangle > context.lineTo(250,100); // line to right bottom corner > context.lineTo(50,100); // line to left bottom corner > context.stroke(); // draw the lines ### `ClosePathSample2` > var context = document.getElementById('ClosePathSample2').getContext('2d'); > context.addGrid(); > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo(150,25); // starting point at the top of the triangle > context.lineTo(250,100); // line to right bottom corner > context.lineTo(50,100); // line to left bottom corner > context.closePath(); // closes the shape with a line from the left bottom to the initial top point > context.stroke(); // draw the lines ### `ClosePathSample3` > var context = document.getElementById('ClosePathSample3').getContext('2d'); > context.addGrid(); > context.fillStyle = 'red'; > context.beginPath(); > context.moveTo(150,25); > context.lineTo(250,100); > context.lineTo(50,100); > context.closePath(); > context.fill(); ### `StrokeSample1` > var context = document.getElementById('StrokeSample1').getContext('2d'); > context.addGrid (); > // settings for both shapes > context.lineWidth = 10.0; > // the first shape > context.beginPath(); > context.strokeStyle = 'lime'; > context.moveTo (25, 25); > context.lineTo (25, 125); > context.lineTo (125, 125); > context.stroke(); > // the second shape > context.beginPath(); > context.strokeStyle = 'maroon'; > context.moveTo (175, 25); > context.lineTo (175, 125); > context.lineTo (275, 125); > context.stroke(); ### `StrokeSample2` > var context = document.getElementById('StrokeSample2').getContext('2d'); > context.addGrid (); > // settings for both lines > context.lineWidth = 10.0; > // the first shape > context.beginPath(); > context.strokeStyle = 'lime'; > context.moveTo (25, 25); > context.lineTo (25, 125); > context.lineTo (125, 125); > context.closePath(); > context.stroke(); > // the second shape > context.beginPath(); > context.strokeStyle = 'maroon'; > context.moveTo (175, 25); > context.lineTo (175, 125); > context.lineTo (275, 125); > context.closePath(); > context.stroke(); ### `FillSample1` > var context = document.getElementById('FillSample1').getContext('2d'); > context.addGrid (); > // the first triangle > context.fillStyle = 'lime'; // set the color for shapes subsequently drawn with fill() to 'lime' > context.beginPath(); // start a new path > context.moveTo (25, 25); // go to (25,25), which now becomes the current point in the path > context.lineTo (25, 125); // add a line from (25,25) to (25,125); the latter is the new current point in the path > context.lineTo (125, 125); // add another line from (25,125) to (125,125) to the path > context.fill(); // the path is closed with a line from (125,125) to the initial (25,25) and > // the shape area is now drawn with the fillStyle color 'lime' > // the second triangle > context.beginPath(); // start another path > context.moveTo (175, 25); // go to (175,25) > context.lineTo (175, 125); // add a line from (175,25) to (175,125) > context.lineTo (275, 125); // add a line from (175,125) to (275,125) > context.fillStyle = 'maroon'; // set the fillStyle to the color 'maroon' > context.fill(); // close the path, making it a triangle, and draw the shape area in 'maroon' color ### `NonConvexShape0` > var context = document.getElementById('NonConvexShape0').getContext('2d'); > context.addGrid(); > context.beginPath(); > context.moveTo (50,25); > context.lineTo (50,125); > context.lineTo (150,25); > context.lineTo (150,125); > context.lineTo (250,25); > context.lineTo (250,125); > context.lineWidth = 2.0; > context.strokeStyle = 'red'; > context.stroke(); ### `NonConvexShape1` > var context = document.getElementById('NonConvexShape1').getContext('2d'); > context.addGrid(); > context.fillStyle = 'red'; > context.fillRect(50,25,200,100); ### `NonConvexShape2` > var context = document.getElementById('NonConvexShape2').getContext('2d'); > context.addGrid(); > context.beginPath(); > context.moveTo (50,25); > context.lineTo (50,125); > context.lineTo (150,25); > context.lineTo (150,125); > context.lineTo (250,25); > context.lineTo (250,125); > context.fillStyle = 'red'; > context.fill(); ### `NonConvexShape3` > var context = document.getElementById('NonConvexShape3').getContext('2d'); > context.addGrid(); > context.beginPath(); > context.moveTo (50,25); > context.lineTo (50,125); > context.lineTo (150,25); > context.lineTo (150,125); > context.lineTo (250,25); > context.lineTo (250,125); > context.closePath(); > context.lineWidth = 2.0; > context.strokeStyle = 'red'; > context.stroke(); ### `LineToSample1` > var context = document.getElementById('LineToSample1').getContext('2d'); > context.addGrid(30); > context.strokeStyle = 'navy'; // set the strokeStyle color to 'navy' (for the stroke() call below) > context.lineWidth = 3.0; // set the line width to 3 pixels > context.beginPath(); // start a new path > context.moveTo (150,30); // set (150,20) to be the starting point > context.lineTo (270,120); // line from (150,30) to (270,120) > context.lineTo (30,120); // horizontal line from (270,120) to (30,120) > context.lineTo (150,30); // line back to the starting point (we could have called closePath() instead) > context.stroke(); // actually draw the triangle shape in 'navy' color and 3 pixel wide lines ### `LineToSample2` > var context = document.getElementById('LineToSample2').getContext('2d'); > context.addGrid(30); > context.fillStyle = 'navy'; // set the fillStyle color to 'navy' (for the fill() call below) > context.beginPath(); // start a new path > context.moveTo (150,30); // set (150,20) to be the starting point > context.lineTo (270,120); // line from (150,30) to (270,120) > context.lineTo (30,120); // horizontal line from (270,120) to (30,120) > context.fill(); // actually draw the triangle shape in 'navy' color and 3 pixel wide lines ### `MoveToSample1` > var context = document.getElementById('MoveToSample1').getContext('2d'); > context.addGrid(); > // set the line style to be drawn with stroke() > context.lineWidth = 9.0; > context.strokeStyle = 'red'; > // create the path > context.beginPath(); > context.moveTo (50,25); context.lineTo (50,75); // first vertical line > context.moveTo (100,25); context.lineTo (100,75); // second vertical line > context.moveTo (150,25); context.lineTo (150,75); // third vertical line > context.stroke(); ### `MoveToSample2` > var context = document.getElementById('MoveToSample2').getContext('2d'); > context.addGrid(); > context.lineWidth = 9.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.lineTo (50,25); context.lineTo (50,75); > context.lineTo (100,25); context.lineTo (100,75); > context.lineTo (150,25); context.lineTo (150,75); > context.stroke(); ### `RectSample1` > var context = document.getElementById ('RectSample1').getContext('2d'); > context.addGrid(20); > context.beginPath(); > context.rect (20,60,60,60); > context.moveTo (10,70); > context.lineTo (50,10); > context.lineTo (90,70); > context.strokeStyle = "black"; > context.lineWidth = 5.0; > context.stroke(); ### `RectSample2` > var context = document.getElementById ('RectSample2').getContext('2d'); > context.addGrid(20); > context.beginPath(); > context.rect (20,60,60,60); > context.moveTo (10,70); > context.lineTo (50,10); > context.lineTo (90,70); > var lg = context.createLinearGradient (20,20,100,130); // create a linear gradient named lg > lg.addColorStop (0, 'yellow'); // set the color of lg at the beginning (=top) to 'yellow' > lg.addColorStop (1, 'red'); // set the color of lg at the end (right bottom) to 'red' > context.fillStyle = lg; // set the fillStyle to lg > context.fill(); // paint the house according to the fillStyle settings ### `QuadraticCurveSample0` > var context = document.getElementById('QuadraticCurveSample0').getContext('2d'); > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); > context.quadraticCurveTo (210, 30, 210, 120); > context.stroke(); ### `QuadraticCurveSample1` > var context = document.getElementById('QuadraticCurveSample1').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill(); // cp > context.beginPath(); context.arc(210,120,3,0,2*Math.PI); context.fill(); // point 1 > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('1', 210, 140); > context.fillText ('cp', 190, 25); ### `QuadraticCurveSample2` > var context = document.getElementById('QuadraticCurveSample2').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill(); // cp > context.beginPath(); context.arc(210,120,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (240,15); > context.lineTo (0,135); > context.moveTo (210,0); > context.lineTo (210,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('1', 210, 140); > context.fillText ('cp', 190, 25); > // the curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); > context.quadraticCurveTo (210, 30, 210, 120); > context.stroke(); ### `QuadraticCurveShape0` > var context = document.getElementById('QuadraticCurveShape0').getContext('2d'); > context.addGrid(); > // the curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,25); > context.quadraticCurveTo (275,25,275,75); > context.quadraticCurveTo (275,125,150,125); > context.quadraticCurveTo (25,125,25,75); > context.quadraticCurveTo (25,25,150,25); > context.stroke(); ### `QuadraticCurveShape1` > var context = document.getElementById('QuadraticCurveShape1').getContext('2d'); > context.addGrid(); > // the tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (0,25); context.lineTo (300,25); // upper horizontal line > context.moveTo (0,125); context.lineTo (300,125); // lower horizontal line > context.moveTo (25,0); context.lineTo (25,150); // left vertical line > context.moveTo (275,0); context.lineTo (275,150); // right vertical line > context.stroke(); > // the curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,25); > context.quadraticCurveTo (275,25,275,75); > context.quadraticCurveTo (275,125,150,125); > context.quadraticCurveTo (25,125,25,75); > context.quadraticCurveTo (25,25,150,25); > context.stroke(); ### `QuadraticCurveShape2` > var context = document.getElementById('QuadraticCurveShape2').getContext('2d'); > context.addGrid(); > // the tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (0,25); context.lineTo (300,25); // upper horizontal line > context.moveTo (0,125); context.lineTo (300,125); // lower horizontal line > context.moveTo (25,0); context.lineTo (25,150); // left vertical line > context.moveTo (275,0); context.lineTo (275,150); // right vertical line > context.stroke(); > // the dots > context.fillStyle = 'green'; > var dotRadius = 5; > context.beginPath(); context.arc(150, 25,dotRadius,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(275, 25,dotRadius,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(275, 75,dotRadius,0,2*Math.PI); context.fill(); // point 1 > // dot text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 150, 13); > context.fillText ('1', 290, 75); > context.font = '8pt sans-serif'; > context.fillText ('cp1', 290, 13); > // the curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,25); > context.quadraticCurveTo (275,25,275,75); > context.stroke(); ### `QuadraticCurveShape3` > var context = document.getElementById('QuadraticCurveShape3').getContext('2d'); > context.addGrid(); > // the tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (0,25); context.lineTo (300,25); // upper horizontal line > context.moveTo (0,125); context.lineTo (300,125); // lower horizontal line > context.moveTo (25,0); context.lineTo (25,150); // left vertical line > context.moveTo (275,0); context.lineTo (275,150); // right vertical line > context.stroke(); > // the dots > context.fillStyle = 'green'; > var dotRadius = 5; > context.beginPath(); context.arc(150, 25,dotRadius,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(275, 75,dotRadius,0,2*Math.PI); context.fill(); // point 1 > context.beginPath(); context.arc(150,125,dotRadius,0,2*Math.PI); context.fill(); // point 2 > context.beginPath(); context.arc( 25, 75,dotRadius,0,2*Math.PI); context.fill(); // point 3 > context.beginPath(); context.arc(275, 25,dotRadius,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(275,125,dotRadius,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc( 25,125,dotRadius,0,2*Math.PI); context.fill(); // cp3 > context.beginPath(); context.arc( 25, 25,dotRadius,0,2*Math.PI); context.fill(); // cp4 > // dot text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0',150, 13); > context.fillText ('1',290, 75); > context.fillText ('2',150,140); > context.fillText ('3', 11, 75); > context.font = '8pt sans-serif'; > context.fillText ('cp1',288, 13); > context.fillText ('cp2',288,138); > context.fillText ('cp3', 13,138); > context.fillText ('cp4', 13, 13); > // the curve > context.lineWidth = 5.0; // set the line width for the stroke() call below > context.strokeStyle = 'red'; // set the color to 'red' for the stroke() call below > context.beginPath(); // start the new path > context.moveTo (150,25); // move to point 0 at (150,25) > context.quadraticCurveTo (275,25,275,75); // curve from point 0 to point 1 at (275,75) > context.quadraticCurveTo (275,125,150,125); // curve from point 1 to point 2 at (150,125) > context.quadraticCurveTo (25,125,25,75); // curve from point 2 to point 3 at (25,75) > context.quadraticCurveTo (25,25,150,25); // curve from point 3 back to point 0 > context.stroke(); // draw the shape defined by the current path ### `EllipseWithQuadraticCurve` > var context = document.getElementById('EllipseWithQuadraticCurve').getContext('2d'); > context.addGrid(); > // the curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,25); > context.quadraticCurveTo (275, 25, 275, 75); > context.quadraticCurveTo (275, 125, 150, 125); > context.quadraticCurveTo ( 25, 125, 25, 75); > context.quadraticCurveTo ( 25, 25, 150, 25); > context.stroke(); ### `EllipseWithBezierCurve` > var context = document.getElementById('EllipseWithBezierCurve').getContext('2d'); > context.addGrid(); > // the curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,25); > context.bezierCurveTo (275, 25, 275, 25, 275, 75); > context.bezierCurveTo (275, 125, 275, 125, 150, 125); > context.bezierCurveTo ( 25, 125, 25, 125, 25, 75); > context.bezierCurveTo ( 25, 25, 25, 25, 150, 25); > context.stroke(); ### `BezierSample1` > var context = document.getElementById('BezierSample1').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(120, 30,3,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (0,150); > context.lineTo (150,0); > context.moveTo (240,0); > context.lineTo (240,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('1', 260, 120); > context.fillText ('cp1', 100, 25); > context.fillText ('cp2', 270, 30); > // the bezier curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); // go to point 0 at (30,120) > context.bezierCurveTo (120, 30, 240, 30, 240, 120); // go to point 1 at (240,120) > context.stroke(); ### `BezierSample2` > var context = document.getElementById('BezierSample2').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(120, 30,3,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (0,150); > context.lineTo (150,0); > context.moveTo (240,0); > context.lineTo (240,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('cp2', 265, 120); > context.fillText ('cp1', 100, 25); > context.fillText ('1', 260, 30); > // the bezier curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); > context.bezierCurveTo (120, 30, 240, 120, 240, 30); > context.stroke(); ### `BezierSample3` > var context = document.getElementById('BezierSample3').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc( 90, 60,3,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(180, 90,3,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc(120, 60,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (0,150); > context.lineTo (150,0); > context.moveTo (0,0); > context.lineTo (300,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('cp2', 205, 90); > context.fillText ('cp1', 60, 60); > context.fillText ('1', 130, 55); > // the bezier curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); > context.bezierCurveTo (90, 60, 180, 90, 120, 60); > context.stroke(); ### `BezierSample1again` > var context = document.getElementById('BezierSample1again').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(120, 30,3,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (0,150); > context.lineTo (150,0); > context.moveTo (240,0); > context.lineTo (240,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('1', 260, 120); > context.fillText ('cp1', 100, 25); > context.fillText ('cp2', 270, 30); > // the bezier curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); // go to point 0 at (30,120) > context.bezierCurveTo (120, 30, 240, 30, 240, 120); // go to point 1 at (240,120) > context.stroke(); ### `BezierSample4` > var context = document.getElementById('BezierSample4').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc( 60, 90,3,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(240, 30,3,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (0,150); > context.lineTo (150,0); > context.moveTo (240,0); > context.lineTo (240,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('1', 260, 120); > context.fillText ('cp1', 40, 90); > context.fillText ('cp2', 270, 30); > // the bezier curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); // go to point 0 at (30,120) > context.bezierCurveTo (60, 90, 240, 30, 240, 120); // go to point 1 at (240,120) > context.stroke(); ### `BezierSample5` > var context = document.getElementById('BezierSample5').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc( 60, 90,3,0,2*Math.PI); context.fill(); // cp1 > context.beginPath(); context.arc(240, 90,3,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (0,150); > context.lineTo (150,0); > context.moveTo (240,0); > context.lineTo (240,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0', 30, 140); > context.fillText ('1', 260, 120); > context.fillText ('cp1', 40, 90); > context.fillText ('cp2', 270, 90); > // the bezier curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); // go to point 0 at (30,120) > context.bezierCurveTo (60, 90, 240, 90, 240, 120); // go to point 1 at (240,120) > context.stroke(); ### `BezierSample6` > var context = document.getElementById('BezierSample6').getContext('2d'); > context.addGrid(30); > // text settings > context.textBaseline = 'middle'; > context.textAlign = 'center'; > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30,120,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(240, 90,3,0,2*Math.PI); context.fill(); // cp2 > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); // point 1 > // the lines > context.strokeStyle = 'green'; > context.lineWidth = 1.0; > context.beginPath(); > context.moveTo (240,0); > context.lineTo (240,150); > context.stroke(); > // dot text > context.fillStyle = 'black'; > context.font = '10pt sans-serif'; > context.fillText ('0 = cp1', 30, 140); > context.fillText ('1', 260, 120); > context.fillText ('cp2', 270, 90); > // the bezier curve > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,120); // go to point 0 at (30,120) > context.bezierCurveTo (30, 120, 240, 90, 240, 120); // go to point 1 at (240,120) > context.stroke(); ### `BezierHart0` > var context = document.getElementById('BezierHart0').getContext('2d'); > context.addGrid(30); > context.fillStyle = 'red'; > context.beginPath(); > context.moveTo (150,60); // start at point 0 > context.bezierCurveTo (150,30, 100,30, 90,30); // from point 0 to point 1 > context.bezierCurveTo (60,30,30,60,30,90); // from point 1 to point 2 > context.bezierCurveTo (30,180,90,210,150,240); // from point 2 to point 3 > context.bezierCurveTo (210,210,270,180,270,90); // from point 3 to point 4 > context.bezierCurveTo (270,60,240,30,210,30); // from point 4 to point 5 > context.bezierCurveTo (180,30,150,30,150,60); // from point 5 to point 0 > context.fill(); ### `BezierHart1` > var context = document.getElementById('BezierHart1').getContext('2d'); > context.addGrid(30); > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc(150, 60,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc( 90, 30,3,0,2*Math.PI); context.fill(); // point 1 > context.beginPath(); context.arc( 30, 90,3,0,2*Math.PI); context.fill(); // point 2 > context.beginPath(); context.arc(150,240,3,0,2*Math.PI); context.fill(); // point 3 > context.beginPath(); context.arc(270, 90,3,0,2*Math.PI); context.fill(); // point 4 > context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill(); // point 5 > // text > context.textBaseline = 'middle'; > context.textAlign = 'center'; > context.fillStyle = 'black'; > context.font = "12pt sans-serif"; > context.fillText ('0',150,75); > context.fillText ('1',90,15); > context.fillText ('2',15,90); > context.fillText ('3',150,255); > context.fillText ('4',285,90); > context.fillText ('5',210,15); > // 1.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (150,60); // point0 > context.lineTo (150,30); // cp1 > context.moveTo (90,30); // point1 > context.lineTo (120,30); // cp2 > context.stroke(); > // 1.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,60); // point0 > context.bezierCurveTo (150,30, 100,30, 90,30); // cp1, cp2, point1 > context.stroke(); > // 2.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(90,30); // point1 > context.lineTo(60,30); // cp3 > context.moveTo(30,90);// point2 > context.lineTo(30,60); // cp4 > context.stroke(); > // 2.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (90,30); // point1 > context.bezierCurveTo (60,30,30,60,30,90); // cp3, cp4, point2 > context.stroke(); > // 3.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(30,90); // point2 > context.lineTo(30,180); // cp5 > context.moveTo(150,240);// point3 > context.lineTo(90,210); // cp6 > context.stroke(); > // 3.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,90); // point2 > context.bezierCurveTo (30,180,90,210,150,240); // cp5, cp6, point3 > context.stroke(); > // 4.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(150,240); // point3 > context.lineTo(210,210); // cp7 > context.moveTo(270,90);// point4 > context.lineTo(270,180); // cp8 > context.stroke(); > // 4.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,240); // point3 > context.bezierCurveTo (210,210,270,180,270,90); // cp7, cp8, point4 > context.stroke(); > // 5.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(270,90); // point4 > context.lineTo(270,60); // cp9 > context.moveTo(210,30);// point5 > context.lineTo(240,30); // cp10 > context.stroke(); > // 5.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (270,90); // point4 > context.bezierCurveTo (270,60,240,30,210,30); // cp9, cp10, point5 > context.stroke(); > // 6.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(210,30); // point5 > context.lineTo(180,30); // cp11 > context.moveTo(150,60);// point0 > context.lineTo(150,30); // cp12 > context.stroke(); > // 6.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (210,30); // point5 > context.bezierCurveTo (180,30,150,30,150,60); // cp11, cp12, point0 > context.stroke(); ### `BezierHart2` > var context = document.getElementById('BezierHart2').getContext('2d'); > context.addGrid(30); > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc(150, 60,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc( 90, 30,3,0,2*Math.PI); context.fill(); // point 1 > // text > context.textBaseline = 'middle'; > context.textAlign = 'center'; > context.fillStyle = 'black'; > context.font = "12pt sans-serif"; > context.fillText ('0',150,75); > context.fillText ('1',90,15); > // 1.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (150,60); // point0 > context.lineTo (150,30); // cp1 > context.moveTo (90,30); // point1 > context.lineTo (120,30); // cp2 > context.stroke(); > // 1.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,60); // point0 > context.bezierCurveTo (150,30, 100,30, 90,30); // cp1, cp2, point1 > context.stroke(); > // the command text > context.fillStyle = 'black'; > context.font = "10pt monospace"; > context.textAlign = 'left'; > context.fillText ( 'moveTo(150,60); // start at point 0',10,150 ); > context.fillText ( 'bezierCurveTo(150,30,100,30,90,30);',10,180); ### `BezierHart3` > var context = document.getElementById('BezierHart3').getContext('2d'); > context.addGrid(30); > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 90, 30,3,0,2*Math.PI); context.fill(); // point 1 > context.beginPath(); context.arc( 30, 90,3,0,2*Math.PI); context.fill(); // point 2 > // text > context.textBaseline = 'middle'; > context.textAlign = 'center'; > context.fillStyle = 'black'; > context.font = "12pt sans-serif"; > context.fillText ('1',90,15); > context.fillText ('2',15,90); > // 2.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(90,30); // point1 > context.lineTo(60,30); // cp3 > context.moveTo(30,90);// point2 > context.lineTo(30,60); // cp4 > context.stroke(); > // 2.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (90,30); // point1 > context.bezierCurveTo (60,30,30,60,30,90); // cp3, cp4, point2 > context.stroke(); > // the command text > context.fillStyle = 'black'; > context.font = "10pt monospace"; > context.textAlign = 'left'; > context.fillText ( 'bezierCurveTo(60,30,30,60,30,90);',10,180); ### `BezierHart4` > var context = document.getElementById('BezierHart4').getContext('2d'); > context.addGrid(30); > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc( 30, 90,3,0,2*Math.PI); context.fill(); // point 2 > context.beginPath(); context.arc(150,240,3,0,2*Math.PI); context.fill(); // point 3 > // text > context.textBaseline = 'middle'; > context.textAlign = 'center'; > context.fillStyle = 'black'; > context.font = "12pt sans-serif"; > context.fillText ('2',15,90); > context.fillText ('3',150,255); > // 3.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(30,90); // point2 > context.lineTo(30,180); // cp5 > context.moveTo(150,240);// point3 > context.lineTo(90,210); // cp6 > context.stroke(); > // 3.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (30,90); // point2 > context.bezierCurveTo (30,180,90,210,150,240); // cp5, cp6, point3 > context.stroke(); > // the command text > context.fillStyle = 'black'; > context.font = "10pt monospace"; > context.textAlign = 'left'; > context.fillText ( 'bezierCurveTo(30,180,90,210,150,240);',10,45); ### `BezierHart5` > var context = document.getElementById('BezierHart5').getContext('2d'); > context.addGrid(30); > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc(150,240,3,0,2*Math.PI); context.fill(); // point 3 > context.beginPath(); context.arc(270, 90,3,0,2*Math.PI); context.fill(); // point 4 > // text > context.textBaseline = 'middle'; > context.textAlign = 'center'; > context.fillStyle = 'black'; > context.font = "12pt sans-serif"; > context.fillText ('3',150,255); > context.fillText ('4',285,90); > // 4.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(150,240); // point3 > context.lineTo(210,210); // cp7 > context.moveTo(270,90);// point4 > context.lineTo(270,180); // cp8 > context.stroke(); > // 4.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (150,240); // point3 > context.bezierCurveTo (210,210,270,180,270,90); // cp7, cp8, point4 > context.stroke(); > // the command text > context.fillStyle = 'black'; > context.font = "10pt monospace"; > context.textAlign = 'left'; > context.fillText ( 'bezierCurveTo(210,210,270,180,270,90);',3,45); ### `BezierHart6` > var context = document.getElementById('BezierHart6').getContext('2d'); > context.addGrid(30); > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc(270, 90,3,0,2*Math.PI); context.fill(); // point 4 > context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill(); // point 5 > // text > context.textBaseline = 'middle'; > context.textAlign = 'center'; > context.fillStyle = 'black'; > context.font = "12pt sans-serif"; > context.fillText ('4',285,90); > context.fillText ('5',210,15); > // 5.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(270,90); // point4 > context.lineTo(270,60); // cp9 > context.moveTo(210,30);// point5 > context.lineTo(240,30); // cp10 > context.stroke(); > // 5.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (270,90); // point4 > context.bezierCurveTo (270,60,240,30,210,30); // cp9, cp10, point5 > context.stroke(); > // the command text > context.fillStyle = 'black'; > context.font = "10pt monospace"; > context.textAlign = 'left'; > context.fillText ( 'bezierCurveTo(270,60,240,30,210,30);',10,165); ### `BezierHart7` > var context = document.getElementById('BezierHart7').getContext('2d'); > context.addGrid(30); > // the dots > context.fillStyle = 'green'; > context.beginPath(); context.arc(150, 60,3,0,2*Math.PI); context.fill(); // point 0 > context.beginPath(); context.arc(210, 30,3,0,2*Math.PI); context.fill(); // point 5 > // text > context.textBaseline = 'middle'; > context.textAlign = 'center'; > context.fillStyle = 'black'; > context.font = "12pt sans-serif"; > context.fillText ('0',150,75); > context.fillText ('5',210,15); > // 6.a) the tangents > context.lineWidth = 2.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo(210,30); // point5 > context.lineTo(180,30); // cp11 > context.moveTo(150,60);// point0 > context.lineTo(150,30); // cp12 > context.stroke(); > // 6.b) the red curve > context.lineWidth = 1.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (210,30); // point5 > context.bezierCurveTo (180,30,150,30,150,60); // cp11, cp12, point0 > context.stroke(); > // the command text > context.fillStyle = 'black'; > context.font = "10pt monospace"; > context.textAlign = 'left'; > context.fillText ( 'bezierCurveTo(180,30,150,30,150,60);',10,165); ### `ArcSample1` > var context = document.getElementById('ArcSample1').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.33)"; // red color with 1/3 transparency > // now draw five filled circle pieces: > context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.fill(); // 1st > context.beginPath(); context.arc (180, 60, 50, 0, Math.PI, false); context.fill(); // 2nd > context.beginPath(); context.arc (300, 60, 50, 0, Math.PI, true ); context.fill(); // 3rd > context.beginPath(); context.arc (420, 60, 50, 2, 6, false); context.fill(); // 4th > context.beginPath(); context.arc (540, 60, 50, 2, 6, true ); context.fill(); // 5th ### `ArcSample2` > var context = document.getElementById('ArcSample2').getContext('2d'); > context.strokeStyle = "rgba(255,0,0,0.33)"; // red color with 1/3 transparency > // now draw five filled circle pieces: > context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.stroke(); // 1st > context.beginPath(); context.arc (180, 60, 50, 0, Math.PI, false); context.stroke(); // 2nd > context.beginPath(); context.arc (300, 60, 50, 0, Math.PI, true ); context.stroke(); // 3rd > context.beginPath(); context.arc (420, 60, 50, 2, 6, false); context.stroke(); // 4th > context.beginPath(); context.arc (540, 60, 50, 2, 6, true ); context.stroke(); // 5th ### `ArcSample3` > var context = document.getElementById('ArcSample3').getContext('2d'); > context.addGrid (30); > context.fillStyle = "rgba(255,0,0,0.33)"; // red color with 1/3 transparency > // now draw five filled circle pieces: > context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.fill(); // 1st > context.beginPath(); context.arc (180, 60, 50, 0, Math.PI, false); context.fill(); // 2nd > context.beginPath(); context.arc (300, 60, 50, 0, Math.PI, true ); context.fill(); // 3rd > context.beginPath(); context.arc (420, 60, 50, 2, 6, false); context.fill(); // 4th > context.beginPath(); context.arc (540, 60, 50, 2, 6, true ); context.fill(); // 5th > // text > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '12pt sans-serif'; > context.fillText ('1st', 60, 130); > context.fillText ('2nd', 180, 130); > context.fillText ('3rd', 300, 130); > context.fillText ('4th', 420, 130); > context.fillText ('5th', 540, 130); > // add the five center points: > context.fillStyle = "red"; > context.beginPath(); context.arc ( 60, 60, 3, 0, 2 * Math.PI); context.fill(); // 1st > context.beginPath(); context.arc (180, 60, 3, 0, 2 * Math.PI); context.fill(); // 2nd > context.beginPath(); context.arc (300, 60, 3, 0, 2 * Math.PI); context.fill(); // 3rd > context.beginPath(); context.arc (420, 60, 3, 0, 2 * Math.PI); context.fill(); // 4th > context.beginPath(); context.arc (540, 60, 3, 0, 2 * Math.PI); context.fill(); // 5th ### `ArcExplained1` > var context = document.getElementById('ArcExplained1').getContext('2d'); > context.addGrid (20); > context.fillStyle = "rgba(255,0,0,0.2)"; > context.beginPath(); > context.arc ( 80, 80, 60, 0, 2 * Math.PI, false); > context.fill(); > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('(x,y)', 80, 100); > context.fillText ('r', 110, 70); > context.fillText ('(x,y) = (80,80) and r = 60', 80, 12); > context.fillStyle = "red"; > context.beginPath(); > context.arc ( 80, 80, 3, 0, 2 * Math.PI); > context.fill(); > context.strokeStyle = "red"; > context.lineWidth = 3; > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (140, 80); > context.stroke(); ### `ArcExplained2` > var context = document.getElementById('ArcExplained2').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.2)"; > context.beginPath(); > context.arc ( 80, 80, 60, 0, 2 * Math.PI, false); > context.fill(); > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('0', 150, 80); > context.fillText ('a', 120, 140); > context.fillStyle = "red"; > context.beginPath(); > context.arc ( 80, 80, 3, 0, 2 * Math.PI); > context.fill(); > context.strokeStyle = "red"; > context.lineWidth = 3; > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (140, 80); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(1) + 80, 60 * Math.sin(1) + 80); > context.stroke(); > context.beginPath(); > context.arc (80, 80, 60, 0, 1); > context.stroke(); ### `ArcExplained3` > var context = document.getElementById('ArcExplained3').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.2)"; > context.beginPath(); > context.arc ( 80, 80, 60, 0, 2 * Math.PI, false); > context.fill(); > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('0', 150, 80); > context.fillText ('1r', 120, 140); > context.fillText ('2r', 50, 145); > context.fillText ('3r', 10, 90); > context.fillText ('4r', 30, 30); > context.fillText ('5r', 100, 15); > context.fillText ('6r', 147, 60); > context.strokeStyle = "red"; > context.lineWidth = 3; > context.beginPath(); > context.arc (80, 80, 60, 0, 2 * Math.PI); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (140, 80); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(1) + 80, 60 * Math.sin(1) + 80); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(2) + 80, 60 * Math.sin(2) + 80); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(3) + 80, 60 * Math.sin(3) + 80); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(4) + 80, 60 * Math.sin(4) + 80); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(5) + 80, 60 * Math.sin(5) + 80); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(6) + 80, 60 * Math.sin(6) + 80); > context.stroke(); ### `ArcExplained4` > var context = document.getElementById('ArcExplained4').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.2)"; > context.beginPath(); > context.arc ( 80, 80, 60, 0, 2*Math.PI, false); > context.fill(); > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('2r', 50, 145); > context.fillText ('6r', 147, 60); > context.strokeStyle = "red"; > context.lineWidth = 3; > context.beginPath(); > context.arc (80, 80, 60, 0, 2*Math.PI); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(2) + 80, 60 * Math.sin(2) + 80); > context.stroke(); > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos(6) + 80, 60 * Math.sin(6) + 80); > context.stroke(); ### `ArcExplained4filled` > var context = document.getElementById('ArcExplained4filled').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.33)"; > context.beginPath(); > context.arc ( 80, 80, 60, 2, 6, false); > context.fill(); > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('arc() drawn with fill()', 80, 150); > context.strokeStyle = "red"; > context.lineWidth = 3; ### `ArcExplained4stroke` > var context = document.getElementById('ArcExplained4stroke').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.33)"; > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('arc() drawn with stroke()', 80, 150); > context.strokeStyle = "rgba(255,0,0,0.2)"; > context.lineWidth = 3; > context.beginPath(); > context.arc (80, 80, 60, 2, 6); > context.stroke(); ### `ArcExplained5filled` > var context = document.getElementById('ArcExplained5filled').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.33)"; > context.beginPath(); > context.arc ( 80, 80, 60, 2, 6, true); > context.fill(); > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('arc() drawn with fill()', 80, 20); ### `ArcExplained5stroke` > var context = document.getElementById('ArcExplained5stroke').getContext('2d'); > context.fillStyle = "rgba(255,0,0,0.33)"; > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillText ('arc() drawn with stroke()', 80, 20); > context.strokeStyle = "rgba(255,0,0,0.2)"; > context.lineWidth = 3; > context.beginPath(); > context.arc (80, 80, 60, 2, 6, true); > context.stroke(); ### `ArcExplained6deg` > var context = document.getElementById('ArcExplained6deg').getContext('2d'); > // the half transparent disk > context.fillStyle = "rgba(255,0,0,0.2)"; > context.beginPath(); > context.arc ( 100, 80, 60, 0, 2 * Math.PI, false); > context.fill(); > // the angles > context.strokeStyle = "red"; > context.lineWidth = 3; > context.beginPath(); > context.arc (100, 80, 60, 0, 2 * Math.PI); > context.moveTo (40, 80); > context.lineTo (160, 80); > context.moveTo (100, 20); > context.lineTo (100, 140); > context.stroke(); > // text > context.fillStyle = 'black'; > context.font = '12pt sans-serif'; > context.fillText ('degree', 10, 12); > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '6pt sans-serif'; > context.fillText ('0=360', 180, 80); > context.fillText ('90', 100, 150); > context.fillText ('180', 25, 80); > context.fillText ('270', 100, 10); ### `ArcExplained6pi` > var context = document.getElementById('ArcExplained6pi').getContext('2d'); > // the half transparent disk > context.fillStyle = "rgba(255,0,0,0.2)"; > context.beginPath(); > context.arc ( 100, 80, 60, 0, 2 * Math.PI, false); > context.fill(); > // the angles > context.strokeStyle = "red"; > context.lineWidth = 3; > context.beginPath(); > context.arc (100, 80, 60, 0, 2 * Math.PI); > context.moveTo (40, 80); > context.lineTo (160, 80); > context.moveTo (100, 20); > context.lineTo (100, 140); > context.stroke(); > // text > context.fillStyle = 'black'; > context.font = '12pt sans-serif'; > context.fillText ('radian', 10, 12); > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '6pt sans-serif'; > context.fillText ('0=2*Math.PI', 190, 80); > context.fillText ('0.5*Math.PI', 100, 150); > context.fillText ('Math.PI', 20, 80); > context.fillText ('1.5*Math.PI', 100, 10); ### `ArcExplained7` > var context = document.getElementById('ArcExplained7').getContext('2d'); > context.addGrid (20); > context.fillStyle = "rgba(255,0,0,0.2)"; > context.beginPath(); > context.arc ( 80, 80, 60, 0, 2 * Math.PI, false); > context.fill(); > context.fillStyle = 'black'; > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '8pt sans-serif'; > context.fillStyle = "red"; > context.beginPath(); > context.arc ( 80, 80, 3, 0, 2 * Math.PI); > context.fill(); > context.strokeStyle = "red"; > context.lineWidth = 3; > context.beginPath(); > context.moveTo (80, 80); > context.lineTo (140, 80); > context.moveTo (80, 80); > context.lineTo (60 * Math.cos (3/4 * Math.PI) + 80, 60 * Math.sin (3/4 * Math.PI) + 80); > context.stroke(); > context.fillStyle = "black"; > context.beginPath(); > context.arc (60 * Math.cos (3/4 * Math.PI) + 80, 60 * Math.sin (3/4 * Math.PI) + 80, 3, 0, 2 * Math.PI); > context.fill(); ### `ArcWithInitLine` > var context = document.getElementById('ArcWithInitLine').getContext('2d'); > context.addGrid(30); > context.lineWidth = 3.0; > context.strokeStyle = "red"; > context.beginPath (); > context.moveTo (30, 90); > context.arc (210, 90, 60, 2, 6); > context.lineTo (390, 90); > context.stroke(); ### `ArcSample2again` > var context = document.getElementById('ArcSample2again').getContext('2d'); > context.strokeStyle = "rgba(255,0,0,0.33)"; // red color with 1/3 transparency > // now draw five filled circle pieces: > context.beginPath(); context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); context.stroke(); // 1st > context.beginPath(); context.arc (180, 60, 50, 0, Math.PI, false); context.stroke(); // 2nd > context.beginPath(); context.arc (300, 60, 50, 0, Math.PI, true ); context.stroke(); // 3rd > context.beginPath(); context.arc (420, 60, 50, 2, 6, false); context.stroke(); // 4th > context.beginPath(); context.arc (540, 60, 50, 2, 6, true ); context.stroke(); // 5th ### `ArcSample1singlePath` > var context = document.getElementById('ArcSample1singlePath').getContext('2d'); > context.strokeStyle = "rgba(255,0,0,0.33)"; // red color with 1/3 transparency > context.beginPath(); > context.arc ( 60, 60, 50, 0, 2 * Math.PI, false); // 1st > context.arc (180, 60, 50, 0, Math.PI, false); // 2nd > context.arc (300, 60, 50, 0, Math.PI, true ); // 3rd > context.arc (420, 60, 50, 2, 5, false); // 4th > context.arc (540, 60, 50, 2, 5, true ); // 5th > context.stroke(); ### `ArcSample00singlePath` > var context = document.getElementById('ArcSample00singlePath').getContext('2d'); > context.addGrid (30); > context.fillStyle = "rgba(255,0,0,0.33)"; > context.beginPath(); > context.arc (120, 60, 50, 2, 5, true); > context.fill(); ### `ArcSample01singlePath` > var context = document.getElementById('ArcSample01singlePath').getContext('2d'); > context.addGrid (30); > context.fillStyle = "rgba(255,0,0,0.33)"; > context.beginPath(); > context.moveTo (30,25); > context.arc (120, 60, 50, 2, 5, true); > context.lineTo (30,100); > context.fill(); ### `ArcSample02singlePath` > var context = document.getElementById('ArcSample02singlePath').getContext('2d'); > context.addGrid (30); > context.lineWidth = 3.0; > context.strokeStyle = "rgba(255,0,0,0.33)"; > context.beginPath(); > context.moveTo (30,25); > context.arc (120, 60, 50, 2, 5, true); > context.lineTo (30,100); > context.stroke(); ### `ArcToSample0` > var context = document.getElementById('ArcToSample0').getContext('2d'); > //context.addGrid(30); > // draw the arc > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (60, 120); // makes (x0,y0)=(60,120) the current point > context.arcTo (150, 30, 240, 120, 50); // arcTo() with points (x1,y1)=(150,30) and (x2,y2)=(240,120) and radius 50 > context.stroke(); ### `ArcToSample0points` > var context = document.getElementById('ArcToSample0points').getContext('2d'); > context.addGrid(30); > // draw the points > context.fillStyle = 'green'; > context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); > // text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '16pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ('0', 45, 105); > context.fillText ('1', 150, 15); > context.fillText ('2', 255, 105); ### `ArcToSample0lines` > var context = document.getElementById('ArcToSample0lines').getContext('2d'); > context.addGrid(30); > // draw the points > context.fillStyle = 'green'; > context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); > // draw the two tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (30,150); > context.lineTo (150, 30); > context.lineTo (270,150); > context.stroke(); > // text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '16pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ('0', 45, 105); > context.fillText ('1', 150, 15); > context.fillText ('2', 255, 105); ### `ArcToSample0explained` > var context = document.getElementById('ArcToSample0explained').getContext('2d'); > context.addGrid(30); > // draw the points > context.fillStyle = 'green'; > context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); > // draw the two tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (30,150); > context.lineTo (150, 30); > context.lineTo (270,150); > context.stroke(); > // text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '16pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ('0', 45, 105); > context.fillText ('1', 150, 15); > context.fillText ('2', 255, 105); > // draw the arc > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (60, 120); > context.arcTo (150, 30, 240, 120, 50); > context.stroke(); ### `ArcToSample0Radius50` > var context = document.getElementById('ArcToSample0Radius50').getContext('2d'); > //context.addGrid(30); > // draw the points > context.fillStyle = 'green'; > context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); > // draw the two tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (30,150); > context.lineTo (150, 30); > context.lineTo (270,150); > context.stroke(); > // text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '16pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ('0', 45, 105); > context.fillText ('1', 150, 15); > context.fillText ('2', 255, 105); > context.textAlign = 'left'; > context.font = '10pt sans-serif'; > context.fillText ('radius = 50', 10, 15); > // draw the arc > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (60, 120); > context.arcTo (150, 30, 240, 120, 50); > context.stroke(); ### `ArcToSample0Radius20` > var context = document.getElementById('ArcToSample0Radius20').getContext('2d'); > //context.addGrid(30); > // draw the points > context.fillStyle = 'green'; > context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); > // draw the two tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (30,150); > context.lineTo (150, 30); > context.lineTo (270,150); > context.stroke(); > // text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '16pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ('0', 45, 105); > context.fillText ('1', 150, 15); > context.fillText ('2', 255, 105); > context.textAlign = 'left'; > context.font = '10pt sans-serif'; > context.fillText ('radius = 20', 10, 15); > // draw the arc > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (60, 120); > context.arcTo (150, 30, 240, 120, 20); > context.stroke(); ### `ArcToSample0Radius150` > var context = document.getElementById('ArcToSample0Radius150').getContext('2d'); > //context.addGrid(30); > // draw the points > context.fillStyle = 'green'; > context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); > // draw the two tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (30,150); > context.lineTo (150, 30); > context.lineTo (270,150); > context.stroke(); > // text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '16pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ('0', 45, 105); > context.fillText ('1', 150, 15); > context.fillText ('2', 255, 105); > context.textAlign = 'left'; > context.font = '10pt sans-serif'; > context.fillText ('radius = 150', 10, 15); > // draw the arc > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (60, 120); > context.arcTo (150, 30, 240, 120, 150); > context.stroke(); ### `ArcToSample0Radius250` > var context = document.getElementById('ArcToSample0Radius250').getContext('2d'); > //context.addGrid(30); > // draw the points > context.fillStyle = 'green'; > context.beginPath(); context.arc(60,120,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(150,30,3,0,2*Math.PI); context.fill(); > context.beginPath(); context.arc(240,120,3,0,2*Math.PI); context.fill(); > // draw the two tangents > context.lineWidth = 1.0; > context.strokeStyle = 'green'; > context.beginPath(); > context.moveTo (30,150); > context.lineTo (150, 30); > context.lineTo (270,150); > context.stroke(); > // text > context.textAlign = 'center'; > context.textBaseline = 'middle'; > context.font = '16pt sans-serif'; > context.fillStyle = 'black'; > context.fillText ('0', 45, 105); > context.fillText ('1', 150, 15); > context.fillText ('2', 255, 105); > context.textAlign = 'left'; > context.font = '10pt sans-serif'; > context.fillText ('radius = 250', 10, 15); > // draw the arc > context.lineWidth = 5.0; > context.strokeStyle = 'red'; > context.beginPath(); > context.moveTo (60, 120); > context.arcTo (150, 30, 240, 120, 250); > context.stroke(); ### `ClipSample1a` > var context = document.getElementById('ClipSample1a').getContext('2d'); > context.addGrid(30); > // draw a rectangle with text > context.fillStyle = 'aqua'; > context.fillRect (30, 60, 180, 60); > context.fillStyle = 'red'; > context.font = '60px sans-serif'; > context.fillText ('Hello!', 30, 110); ### `ClipSample1b` > var context = document.getElementById('ClipSample1b').getContext('2d'); > context.addGrid(30); > // clipped circle area > context.fillStyle = 'yellow'; > context.beginPath(); > context.arc (60, 60, 60, 0, 2*Math.PI); > context.fill(); ### `ClipSample1` > var context = document.getElementById('ClipSample1').getContext('2d'); > context.addGrid(30); > // 1. clipped circle area > context.fillStyle = 'yellow'; > context.beginPath(); > context.arc (60, 60, 60, 0, 2*Math.PI); > context.fill(); > // 2. clip > context.clip(); > // 3. draw a rectangle with text > context.fillStyle = 'aqua'; > context.fillRect (30, 60, 180, 60); > context.fillStyle = 'red'; > context.font = '60px sans-serif'; > context.fillText ('Hello!', 30, 110); ### `ClipSample2` > var context = document.getElementById('ClipSample2').getContext('2d'); > context.addGrid(30); > context.lineWidth = 3.0; > // clipped circle area > context.strokeStyle = 'yellow'; > context.beginPath(); > context.arc (60, 60, 60, 0, 2*Math.PI); > context.stroke(); > // clip > context.clip(); > // draw a rectangle with text > context.strokeStyle = 'aqua'; > context.strokeRect (30, 60, 180, 60); > context.strokeStyle = 'red'; > context.font = '60px sans-serif'; > context.strokeText ('Hello!', 30, 110); ### `ClipSample3` > var context = document.getElementById('ClipSample3').getContext('2d'); > context.addGrid(30); > // clipped circle area > context.beginPath(); > context.arc (60, 60, 60, 0, 2*Math.PI); > context.fill(); > // clip > context.clip(); > // insert the image > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 0, 0, 120, 120); ### `IsPointInPathSample1` > var context = document.getElementById('IsPointInPathSample1').getContext('2d'); > context.addGrid(); > // add a new path > context.beginPath(); > context.moveTo (75,130); // make (75,130) the current point > context.lineTo (145,75); // line from (75,130) to (145,75) > context.arc (75,75,70,0,Math.PI,true); // draw half circle disk with center (75,75), radius 70 and counterclockwise > context.lineTo (75,130); // line from (5,70) to (75,130) > context.lineWidth = 3.0; // set the line width for the stroke drawing > context.strokeStyle = 'purple'; // set the line color for the stroke drawing > context.stroke(); // draw the shape > // determine the position of two points > var answer1 = context.isPointInPath (25,100); // answer1 is now either true or false > var answer2 = context.isPointInPath (100,25); // answer2 is also either true or false > // print out the result on the canvas > context.font = "14pt sans-serif"; // set the font for the text > context.fillText ( "isPointInPath(25,100) is " + answer1, 200, 50); // print the first line of text > context.fillText ( "isPointInPath(100,25) is " + answer2, 200, 100); // print the second line of text ### `TextSample0` > var canvas = document.getElementById ('TextSample0'); > var context = canvas.getContext ('2d'); > context.addGrid (20); > // set both the strokeStyle and the fillStyle to black > context.strokeStyle = 'black'; > context.fillStyle = 'black'; > // first line of text in the default font: > context.strokeText(context.font, 10, 20); > context.fillText (context.font, 350, 20); > // second line of text: > context.font = '20px fantasy'; > context.strokeText(context.font, 10, 40); > context.fillText (context.font, 350, 40); > // third line of text: > context.font = '40px Verdana'; > context.strokeText(context.font, 10, 80); > context.fillText (context.font, 350, 80); > // fourth line of text: > context.font = '60px Arial'; > context.strokeText(context.font, 10, 140); > context.fillText (context.font, 350, 140); ### `TextAlignLeftSample` > var canvas = document.getElementById('TextAlignLeftSample'); > var context = canvas.getContext('2d'); > context.addGrid (20) > context.font = '20px monospace'; > context.textAlign = 'left'; > context.fillText ("Hello world!", 300, 30); ### `TextAlignRightSample` > var canvas = document.getElementById('TextAlignRightSample'); > var context = canvas.getContext('2d'); > context.addGrid (20) > context.font = '20px monospace'; > context.textAlign = 'right'; > context.fillText ("Hello world!", 300, 30); ### `TextAlignCenterSample` > var canvas = document.getElementById('TextAlignCenterSample'); > var context = canvas.getContext('2d'); > context.addGrid (20) > context.font = '20px monospace'; > context.textAlign = 'center'; > context.fillText ("Hello world!", 300, 30); ### `TextBaselineSample` > var context = document.getElementById('TextBaselineSample').getContext('2d'); > context.addGrid (50); > context.font = '20px monospace'; > context.textBaseline = 'top'; context.fillText ( "top", 0, 50); > context.textBaseline = 'hanging'; context.fillText ( "hanging", 100, 50); > context.textBaseline = 'middle'; context.fillText ( "middle", 200, 50); > context.textBaseline = 'alphabetic'; context.fillText ( "alphabetic", 300, 50); > context.textBaseline = 'ideographic'; context.fillText ( "ideographic", 450, 50); > context.textBaseline = 'bottom'; context.fillText ( "bottom", 600, 50); ### `FillTextSample` > var context = document.getElementById('FillTextSample').getContext('2d'); > context.addGrid (50); > context.fillStyle = 'black'; // explicitly sets the text color to (default) 'black' > context.font = '50px monospace'; > context.fillText ("Hello world!", 0, 50); > context.fillText ("This is a longer string that is limited to 750 pixel.", 0, 100, 750); > context.fillText ("This is a longer string that is limited to 300 pixel.", 0, 150, 300); ### `StrokeTextSample` > var context = document.getElementById('StrokeTextSample').getContext('2d'); > context.addGrid (50); > context.strokeStyle = 'black'; // explicitly sets the text color to (default) 'black' > context.lineWidth = 2.0; // double of the default lineWidth > context.font = '50px monospace'; > context.strokeText ("Hello world!", 0, 50); > context.strokeText ("This is a longer string that is limited to 750 pixel.", 0, 100, 750); ### `TextSampleMeasureText` > var canvas = document.getElementById('TextSampleMeasureText'); > var context = canvas.getContext('2d'); > context.addGrid (30); > var text = "This is some text."; > context.font = '30px Arial'; > context.fillText (text, 0, 30); > var w = context.measureText(text).width; > context.fillText ("The previous line is " + w + " pixel wide.", 0, 60); ### `DrawImageSample1` > var canvas = document.getElementById('DrawImageSample1'); > var context = canvas.getContext('2d'); > context.addGrid (50, 'blue', '12px Arial'); > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 50, 50); ### `DrawImageSample2` > var canvas = document.getElementById('DrawImageSample2'); > var context = canvas.getContext('2d'); > context.addGrid ( 50, 'blue', '12px Arial'); > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 50, 50, 600, 150); > context.drawImage (image, 50, 250, 150, 200); > context.drawImage (image, 350, 250, 100, 200); > context.drawImage (image, 600, 250, 50, 200); ### `DrawImageSample3` > var canvas = document.getElementById ('DrawImageSample3'); > var context = canvas.getContext ('2d'); > context.addGrid (); > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 150, 40, 130, 120, 75, 100, 200, 150); ### `DrawImageSample3image` > var canvas = document.getElementById('DrawImageSample3image'); > var context = canvas.getContext('2d'); > context.addGrid (); > var image = new Image(); > image.src = "horse.jpg"; > context.drawImage (image, 0, 0); > context.font = '14px sans-serif'; > context.strokeStyle = 'red'; > context.lineWidth = 5; > context.strokeRect(150,40,130,120); > context.lineWidth = 1.4; > context.strokeText ('sh=120', 85, 100); > context.strokeText ('sw=130', 180, 175); > context.strokeStyle = 'orange'; > context.lineWidth = 2; > context.beginPath(); > context.moveTo(150,0); > context.lineTo(150,40); > context.moveTo(0,40); > context.lineTo(150,40); > context.stroke(); > context.lineWidth = 1.4; > context.strokeText ('sy=40', 155, 25); > context.strokeText ('sx=150', 60, 60); ### `DrawImageSample3canvas` > var canvas = document.getElementById('DrawImageSample3canvas'); > var context = canvas.getContext('2d'); > context.addGrid (); > context.font = '14px sans-serif'; > context.strokeStyle = 'orange'; > context.lineWidth = 2; > context.beginPath(); > context.moveTo(75,0); > context.lineTo(75,100); > context.moveTo(0,100); > context.lineTo(75,100); > context.stroke(); > context.lineWidth = 1.4; > context.strokeText ('dx=75', 10, 115); > context.strokeText ('dy=100', 80, 50); > context.strokeStyle = 'red'; > context.lineWidth = 5; > context.strokeStyle = 'red'; > context.lineWidth = 5; > context.strokeRect(75,100,200,150); > context.lineWidth = 1.4; > context.strokeText ('dw=200', 150, 270); > context.strokeText ('dh=150', 10, 175); ### `ImageDataSample` > var canvas = document.getElementById('ImageDataSample'); > var w = canvas.width; // w is 256 > var h = canvas.height; // h is 256 > var context = canvas.getContext('2d'); > context.addGrid(32); // see the appendix for this non-standard addGrid() method > var imDat = context.createImageData (w,h); > var i = 0; > for (var y = 0; y < h; y++) { > for (var x = 0; x < w; x++) { > imDat.data[i++] = x; // the Red component of (x,y), which is set to x > imDat.data[i++] = y; // the Green component of (x,y), which is set to y > imDat.data[i++] = 0; // the Blue component of (x,y), which is constant 0 > imDat.data[i++] = 255; // the Alpha/transparency of (x,y), which is constant 255, i.e. fully visible > }; > }; > context.putImageData (imDat, 0, 0) ### `ImageDataSampleAgain` > var context = document.getElementById('ImageDataSampleAgain').getContext('2d'); > context.addGrid(32); > context.drawImage(document.getElementById('ImageDataSample'),0,0); ### `GetImageDataSample1a` > var context = document.getElementById('GetImageDataSample1a').getContext('2d'); > context.addGrid(20); > // generate the text line > context.fillStyle = 'black'; > context.font = '40pt sans-serif'; > context.fillText ('Hi there!',30,70); ### `GetImageDataSample1b` > var context = document.getElementById('GetImageDataSample1b').getContext('2d'); > context.addGrid(20); > // generate the text line > context.fillStyle = 'black'; > context.font = '40pt sans-serif'; > context.fillText ('Hi there!',30,70); > // cut out an ImageData and copy it into the canvas again > var imDat = context.getImageData (20,20,260,60); > context.putImageData (imDat,320,20); > // the red lines > context.strokeStyle = 'red'; > context.lineWidth = 3.0; > context.strokeRect (20,20,260,60); > context.strokeRect (320,20,260,60); ### `GetImageDataSample1c` > var context = document.getElementById('GetImageDataSample1c').getContext('2d'); > context.addGrid(20); > // generate the text field > context.fillStyle = 'black'; > context.font = '40pt sans-serif'; > context.fillText ('Hi there!',30,70); > // cut out an ImageData and copy it into the canvas again > var imDat = context.getImageData (20,20,260,60); > context.putImageData (imDat,320,20); ### `GetImageDataSample2` > var context = document.getElementById('GetImageDataSample2').getContext('2d'); > context.addGrid(20); > // 0. Generated the text field > context.fillStyle = 'black'; > context.font = '40pt sans-serif'; > context.fillText ('Hi there!',30,70); > // 1. Cut out the ImageData object named imDat > var w = 260; // explicitly define the width w of the rectangle area > var h = 60; // explicitly define the height h of the rectangle > var imDat = context.getImageData(20,20,w,h); // cut out the rectangle and save it in an ImageData object named imDat > // 2. Create a new ImageDate object with the mirror image, called mirImDat > var mirImDat = context.createImageData(imDat); // initialze mirImDat; all components of mirImDat.data are 0 > for (var y = 0; y < h; y++) { > for (var x = 0; x < w; x++) { > var d = 4 * (y * w + x); > var s = 4 * (y * w + (w - (x + 1))); > mirImDat.data [d + 0] = imDat.data [s + 0]; > mirImDat.data [d + 1] = imDat.data [s + 1]; > mirImDat.data [d + 2] = imDat.data [s + 2]; > mirImDat.data [d + 3] = imDat.data [s + 3]; > }; // done updating the mirImDat.data components > }; > // 3. Insert the mirImDat into the image again > context.putImageData (mirImDat,320,20); ### `AddGridSample1` > document.getElementById('AddGridSample1').getContext('2d').addGrid(); ### `AddGridSample2` > document.getElementById('AddGridSample2').getContext('2d').addGrid(50,'red'); ### `AddGridSample3` > document.getElementById('AddGridSample3').getContext('2d').addGrid(20,'black','5px sans-serif'); ## `allCanvasDrawings()` --- end of the function > }; // end of function allCanvasDrawings() ## `allCanvasDrawings` is called when the document is loaded > window.onload = allCanvasDrawings;