SVG Canvas Tests

0: squares	function (ctx) { ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#c80000" height="50" stroke="none" width="50" x="10" y="10"/> <rect fill="#0000c8" fill-opacity="0.5" height="50" stroke="none" width="50" x="30" y="30"/> </svg>
1: arctest	function(c) { log("Doing arctest"); // x, y, radius, startAngle, endAngle, anticlockwise c.rect(95,95,10,10); c.arc(100,100, 25, -0.2 Math.PI, 0.2 Math.PI, false); c.stroke(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"> <path d=" M 95,95 L 105,95 L 105,105 L 95,105 L 95,95"/> <path d=" M 120.22542572021484,85.30536651611328 A 25,25 0 0,1 120.22542572021484,114.69463348388672"/> </g> </svg>
2: bowTies	function(ctx) { function drawBowtie(ctx, fillStyle) { ctx.fillStyle = "rgba(200,200,200,0.3)"; ctx.fillRect(-30, -30, 60, 60); ctx.fillStyle = fillStyle; ctx.globalAlpha = 1.0; ctx.beginPath(); ctx.moveTo(25, 25); ctx.lineTo(-25, -25); ctx.lineTo(25, -25); ctx.lineTo(-25, 25); ctx.closePath(); ctx.fill(); } function dot(ctx) { ctx.save(); ctx.fillStyle = "black"; ctx.fillRect(-2, -2, 4, 4); ctx.restore(); } // note that all other translates are relative to this // one ctx.translate(45, 45); ctx.save(); //ctx.translate(0, 0); // unnecessary drawBowtie(ctx, "red"); dot(ctx); ctx.restore(); ctx.save(); ctx.translate(85, 0); ctx.rotate(45 * Math.PI / 180); drawBowtie(ctx, "green"); dot(ctx); ctx.restore(); ctx.save(); ctx.translate(0, 85); ctx.rotate(135 * Math.PI / 180); drawBowtie(ctx, "blue"); dot(ctx); ctx.restore(); ctx.save(); ctx.translate(85, 85); ctx.rotate(90 * Math.PI / 180); drawBowtie(ctx, "yellow"); dot(ctx); ctx.restore(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#c8c8c8" fill-opacity="0.3" height="60" stroke="none" transform="translate(45,45)" width="60" x="-30" y="-30"/> <path d=" M 25,25 L -25,-25 L 25,-25 L -25,25 Z" fill="#ff0000" stroke="none" transform="translate(45,45)"/> <rect fill="#000000" height="4" stroke="none" transform="translate(45,45)" width="4" x="-2" y="-2"/> <rect fill="#c8c8c8" fill-opacity="0.3" height="60" stroke="none" transform="translate(45,45) matrix(0.7071067811865476,0.7071067811865475,-0.7071067811865475,0.7071067811865476,85,0)" width="60" x="-30" y="-30"/> <path d=" M 85,35.35533905029297 L 85,-35.35533905029297 L 120.35533905029297,-3.552713678800501e-15 L 49.64466094970703,3.552713678800501e-15 Z" fill="#008000" stroke="none" transform="translate(45,45)"/> <rect fill="#000000" height="4" stroke="none" transform="translate(45,45) matrix(0.7071067811865476,0.7071067811865475,-0.7071067811865475,0.7071067811865476,85,0)" width="4" x="-2" y="-2"/> <rect fill="#c8c8c8" fill-opacity="0.3" height="60" stroke="none" transform="translate(45,45) matrix(-0.7071067811865475,0.7071067811865476,-0.7071067811865476,-0.7071067811865475,0,85)" width="60" x="-30" y="-30"/> <path d=" M -35.35533905029297,85 L 35.35533905029297,85 L 3.552713678800501e-15,120.35533905029297 L -3.552713678800501e-15,49.64466094970703 Z" fill="#0000ff" stroke="none" transform="translate(45,45)"/> <rect fill="#000000" height="4" stroke="none" transform="translate(45,45) matrix(-0.7071067811865475,0.7071067811865476,-0.7071067811865476,-0.7071067811865475,0,85)" width="4" x="-2" y="-2"/> <rect fill="#c8c8c8" fill-opacity="0.3" height="60" stroke="none" transform="translate(45,45) matrix(6.123233995736766e-17,1,-1,6.123233995736766e-17,85,85)" width="60" x="-30" y="-30"/> <path d=" M 60,110 L 110,60 L 110,110 L 60,60 Z" fill="#ffff00" stroke="none" transform="translate(45,45)"/> <rect fill="#000000" height="4" stroke="none" transform="translate(45,45) matrix(6.123233995736766e-17,1,-1,6.123233995736766e-17,85,85)" width="4" x="-2" y="-2"/> </svg>
3: blackRects	function(ctx) { ctx.strokeRect(0,0,200-1,200-1); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="none" height="199" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" width="199" x="0" y="0"/> <rect fill="#000000" height="100" stroke="none" width="100" x="25" y="25"/> <rect fill="white" fill-opacity="1" fill-rule="nonzero" height="60" width="60" x="45" y="45"/> <rect fill="none" height="50" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" width="50" x="50" y="50"/> </svg>
4: swoosh	function(ctx) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(150, 150); ctx.quadraticCurveTo(60, 70, 70, 150); ctx.lineTo(30, 30); ctx.fill(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 30,30 L 150,150 Q 60,70 70,150 L 30,30" fill="#ff0000" stroke="none"/> </svg>
5: smiley	function(ctx) { ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"> <path d=" M 125,75 A 50,50 0 1,0 25,75 A 50,50 0 1,0 125,75"/> <path d=" M 110,75 A 35,35 0 1,1 40,75"/> <path d=" M 65,65 A 5,5 0 1,0 55,65 A 5,5 0 1,0 65,65"/> <path d=" M 95,65 A 5,5 0 1,0 85,65 A 5,5 0 1,0 95,65"/> </g> </svg>
6: triangles	function(ctx) { // Filled triangle ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); // Stroked triangle ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 25,25 L 105,25 L 25,105" fill="#000000" stroke="none"/> <path d=" M 125,125 L 125,45 L 45,125 Z" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> </svg>
7: arcs	function(ctx) { for (var i=0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x = 25+j50; // x coordinate var y = 25+i50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 45,25 A 20,20 0 1,1 5,25" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 95,25 A 20,20 0 1,1 75,5" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 145,25 A 20,20 0 1,0 105,25 A 20,20 0 1,0 145,25" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 45,75 A 20,20 0 1,0 5,75" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 95,75 A 20,20 0 0,0 75,55" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 145,75 A 20,20 0 1,0 105,75 A 20,20 0 1,0 145,75" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 45,125 A 20,20 0 1,1 5,125" fill="#000000" stroke="none"/> <path d=" M 95,125 A 20,20 0 1,1 75,105" fill="#000000" stroke="none"/> <path d=" M 145,125 A 20,20 0 1,0 105,125 A 20,20 0 1,0 145,125" fill="#000000" stroke="none"/> <path d=" M 45,175 A 20,20 0 1,0 5,175" fill="#000000" stroke="none"/> <path d=" M 95,175 A 20,20 0 0,0 75,155" fill="#000000" stroke="none"/> <path d=" M 145,175 A 20,20 0 1,0 105,175 A 20,20 0 1,0 145,175" fill="#000000" stroke="none"/> </svg>
8: quadraticquotebox	function(ctx) { // Quadratric curves example ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 75,25 Q 25,25 25,62.5 Q 25,100 50,100 Q 50,120 30,125 Q 60,120 65,100 Q 125,100 125,62.5 Q 125,25 75,25" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> </svg>
9: bezierheart	function(ctx) { // Bezier curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.stroke(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 75,40 C 75,37 70,25 50,25 C 20,25 20,62.5 20,62.5 C 20,80 40,102 75,120 C 110,102 130,80 130,62.5 C 130,62.5 130,25 100,25 C 85,25 75,37 75,40" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> </svg>
10: pacman	function(ctx) { function roundedRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.moveTo(x,y+radius); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius,y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.stroke(); } // Draw shapes roundedRect(ctx,12,12,150,150,15); roundedRect(ctx,19,19,150,150,9); roundedRect(ctx,53,53,49,33,10); roundedRect(ctx,53,119,49,16,6); roundedRect(ctx,135,53,49,33,10); roundedRect(ctx,135,119,25,49,10); // Character 1 ctx.beginPath(); ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); ctx.lineTo(34,37); ctx.fill(); // blocks for(i=0;i<8;i++){ ctx.fillRect(51+i16,35,4,4); } for(i=0;i<6;i++){ ctx.fillRect(115,51+i16,4,4); } for(i=0;i<8;i++){ ctx.fillRect(51+i16,99,4,4); } // character 2 ctx.beginPath(); ctx.moveTo(83,116); ctx.lineTo(83,102); ctx.bezierCurveTo(83,94,89,88,97,88); ctx.bezierCurveTo(105,88,111,94,111,102); ctx.lineTo(111,116); ctx.lineTo(106.333,111.333); ctx.lineTo(101.666,116); ctx.lineTo(97,111.333); ctx.lineTo(92.333,116); ctx.lineTo(87.666,111.333); ctx.lineTo(83,116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91,96); ctx.bezierCurveTo(88,96,87,99,87,101); ctx.bezierCurveTo(87,103,88,106,91,106); ctx.bezierCurveTo(94,106,95,103,95,101); ctx.bezierCurveTo(95,99,94,96,91,96); ctx.moveTo(103,96); ctx.bezierCurveTo(100,96,99,99,99,101); ctx.bezierCurveTo(99,103,100,106,103,106); ctx.bezierCurveTo(106,106,107,103,107,101); ctx.bezierCurveTo(107,99,106,96,103,96); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101,102,2,0,Math.PI2,true); ctx.fill(); ctx.beginPath(); ctx.arc(89,102,2,0,Math.PI*2,true); ctx.fill(); }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 12,27 L 12,147 Q 12,162 27,162 L 147,162 Q 162,162 162,147 L 162,27 Q 162,12 147,12 L 27,12 Q 12,12 12,27" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 19,28 L 19,160 Q 19,169 28,169 L 160,169 Q 169,169 169,160 L 169,28 Q 169,19 160,19 L 28,19 Q 19,19 19,28" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 53,63 L 53,76 Q 53,86 63,86 L 92,86 Q 102,86 102,76 L 102,63 Q 102,53 92,53 L 63,53 Q 53,53 53,63" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 53,125 L 53,129 Q 53,135 59,135 L 96,135 Q 102,135 102,129 L 102,125 Q 102,119 96,119 L 59,119 Q 53,119 53,125" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 135,63 L 135,76 Q 135,86 145,86 L 174,86 Q 184,86 184,76 L 184,63 Q 184,53 174,53 L 145,53 Q 135,53 135,63" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 135,129 L 135,158 Q 135,168 145,168 L 150,168 Q 160,168 160,158 L 160,129 Q 160,119 150,119 L 145,119 Q 135,119 135,129" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 48.71259689331055,42.64048767089844 A 13,13 0 1,1 48.71259689331055,31.359512329101562 L 34,37" fill="#000000" stroke="none"/> <rect fill="#000000" height="4" stroke="none" width="4" x="51" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="67" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="83" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="99" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="131" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="147" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="163" y="35"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="51"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="67"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="83"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="115"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="131"/> <rect fill="#000000" height="4" stroke="none" width="4" x="51" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="67" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="83" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="99" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="115" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="131" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="147" y="99"/> <rect fill="#000000" height="4" stroke="none" width="4" x="163" y="99"/> <path d=" M 83,116 L 83,102 C 83,94 89,88 97,88 C 105,88 111,94 111,102 L 111,116 L 106.33300018310547,111.33300018310547 L 101.66600036621094,116 L 97,111.33300018310547 L 92.33300018310547,116 L 87.66600036621094,111.33300018310547 L 83,116" fill="#000000" stroke="none"/> <g fill="#ffffff" stroke="none"> <path d=" M 91,96 C 88,96 87,99 87,101 C 87,103 88,106 91,106 C 94,106 95,103 95,101 C 95,99 94,96 91,96"/> <path d=" M 103,96 C 100,96 99,99 99,101 C 99,103 100,106 103,106 C 106,106 107,103 107,101 C 107,99 106,96 103,96"/> </g> <path d=" M 103,102 A 2,2 0 1,0 99,102 A 2,2 0 1,0 103,102" fill="#000000" stroke="none"/> <path d=" M 91,102 A 2,2 0 1,0 87,102 A 2,2 0 1,0 91,102" fill="#000000" stroke="none"/> </svg>
11: graphImage_test	function(ctx) { var img = new Image(); img.src = '../tests/canvas_tests_images/graphImage.png'; img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>
12: graphImage	function(ctx) { var image = new Image(); image.src = '../tests/canvas_tests_images/graphImage.png'; log("outter image function called for ", image.src); var imageStuff = function() { log("inner imageStuff called for ", image.src); log("drawing image stuff for ctx = ", ctx, "image = ", image, image.width, image.height, image.complete ); ctx.drawImage(image,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } if (image.complete) { log('image.complete == true') imageStuff(); } else { log('image.complete == false') //image.onload = partial(imageStuff, ctx, image) //image.onload = imageStuff var f = function() { //alert("Image Loading Complete") } image.onload = f //addToCallStack(image, 'onload', partial(imageStuff, ctx, image)); } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>
13: scale_image	function(ctx) { var image = new Image(); image.src = '../tests/canvas_tests_images/rhino.jpg'; log("outter image function called for ", image.src); var imageStuff = function() { log("inner imageStuff called for ", image.src); var i, j; for (i=0;i<4;i++) { for (j=0;j<3;j++) { ctx.drawImage(image,j50,i38,50,38); } } } if (image.complete) { log('image.complete == true') imageStuff(); } else { log('image.complete == false') image.onload = imageStuff //addToCallStack(image, 'onload', partial(imageStuff, ctx, image)); } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>
14: fillstyle	function(ctx) { for (i=0;i<6;i++){ for (j=0;j<6;j++){ ctx.fillStyle = 'rgb(' + Math.floor(255-42.5i) + ',' + Math.floor(255-42.5j) + ',0)'; ctx.fillRect(j25,i25,25,25); } } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#ffff00" height="25" stroke="none" width="25" x="0" y="0"/> <rect fill="#ffd400" height="25" stroke="none" width="25" x="25" y="0"/> <rect fill="#ffaa00" height="25" stroke="none" width="25" x="50" y="0"/> <rect fill="#ff7f00" height="25" stroke="none" width="25" x="75" y="0"/> <rect fill="#ff5500" height="25" stroke="none" width="25" x="100" y="0"/> <rect fill="#ff2a00" height="25" stroke="none" width="25" x="125" y="0"/> <rect fill="#d4ff00" height="25" stroke="none" width="25" x="0" y="25"/> <rect fill="#d4d400" height="25" stroke="none" width="25" x="25" y="25"/> <rect fill="#d4aa00" height="25" stroke="none" width="25" x="50" y="25"/> <rect fill="#d47f00" height="25" stroke="none" width="25" x="75" y="25"/> <rect fill="#d45500" height="25" stroke="none" width="25" x="100" y="25"/> <rect fill="#d42a00" height="25" stroke="none" width="25" x="125" y="25"/> <rect fill="#aaff00" height="25" stroke="none" width="25" x="0" y="50"/> <rect fill="#aad400" height="25" stroke="none" width="25" x="25" y="50"/> <rect fill="#aaaa00" height="25" stroke="none" width="25" x="50" y="50"/> <rect fill="#aa7f00" height="25" stroke="none" width="25" x="75" y="50"/> <rect fill="#aa5500" height="25" stroke="none" width="25" x="100" y="50"/> <rect fill="#aa2a00" height="25" stroke="none" width="25" x="125" y="50"/> <rect fill="#7fff00" height="25" stroke="none" width="25" x="0" y="75"/> <rect fill="#7fd400" height="25" stroke="none" width="25" x="25" y="75"/> <rect fill="#7faa00" height="25" stroke="none" width="25" x="50" y="75"/> <rect fill="#7f7f00" height="25" stroke="none" width="25" x="75" y="75"/> <rect fill="#7f5500" height="25" stroke="none" width="25" x="100" y="75"/> <rect fill="#7f2a00" height="25" stroke="none" width="25" x="125" y="75"/> <rect fill="#55ff00" height="25" stroke="none" width="25" x="0" y="100"/> <rect fill="#55d400" height="25" stroke="none" width="25" x="25" y="100"/> <rect fill="#55aa00" height="25" stroke="none" width="25" x="50" y="100"/> <rect fill="#557f00" height="25" stroke="none" width="25" x="75" y="100"/> <rect fill="#555500" height="25" stroke="none" width="25" x="100" y="100"/> <rect fill="#552a00" height="25" stroke="none" width="25" x="125" y="100"/> <rect fill="#2aff00" height="25" stroke="none" width="25" x="0" y="125"/> <rect fill="#2ad400" height="25" stroke="none" width="25" x="25" y="125"/> <rect fill="#2aaa00" height="25" stroke="none" width="25" x="50" y="125"/> <rect fill="#2a7f00" height="25" stroke="none" width="25" x="75" y="125"/> <rect fill="#2a5500" height="25" stroke="none" width="25" x="100" y="125"/> <rect fill="#2a2a00" height="25" stroke="none" width="25" x="125" y="125"/> </svg>
15: strokestyle	function(ctx) { for (i=0;i<6;i++){ for (j=0;j<6;j++){ ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5i) + ',' + Math.floor(255-42.5j) + ')'; ctx.beginPath(); ctx.arc(12.5+j25,12.5+i25,10,0,Math.PI*2,true); ctx.stroke(); } } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 22.5,12.5 A 10,10 0 1,0 2.5,12.5 A 10,10 0 1,0 22.5,12.5" fill="none" stroke="#00ffff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 47.5,12.5 A 10,10 0 1,0 27.5,12.5 A 10,10 0 1,0 47.5,12.5" fill="none" stroke="#00ffd4" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 72.5,12.5 A 10,10 0 1,0 52.5,12.5 A 10,10 0 1,0 72.5,12.5" fill="none" stroke="#00ffaa" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 97.5,12.5 A 10,10 0 1,0 77.5,12.5 A 10,10 0 1,0 97.5,12.5" fill="none" stroke="#00ff7f" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 122.5,12.5 A 10,10 0 1,0 102.5,12.5 A 10,10 0 1,0 122.5,12.5" fill="none" stroke="#00ff55" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 147.5,12.5 A 10,10 0 1,0 127.5,12.5 A 10,10 0 1,0 147.5,12.5" fill="none" stroke="#00ff2a" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 22.5,37.5 A 10,10 0 1,0 2.5,37.5 A 10,10 0 1,0 22.5,37.5" fill="none" stroke="#00d4ff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 47.5,37.5 A 10,10 0 1,0 27.5,37.5 A 10,10 0 1,0 47.5,37.5" fill="none" stroke="#00d4d4" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 72.5,37.5 A 10,10 0 1,0 52.5,37.5 A 10,10 0 1,0 72.5,37.5" fill="none" stroke="#00d4aa" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 97.5,37.5 A 10,10 0 1,0 77.5,37.5 A 10,10 0 1,0 97.5,37.5" fill="none" stroke="#00d47f" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 122.5,37.5 A 10,10 0 1,0 102.5,37.5 A 10,10 0 1,0 122.5,37.5" fill="none" stroke="#00d455" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 147.5,37.5 A 10,10 0 1,0 127.5,37.5 A 10,10 0 1,0 147.5,37.5" fill="none" stroke="#00d42a" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 22.5,62.5 A 10,10 0 1,0 2.5,62.5 A 10,10 0 1,0 22.5,62.5" fill="none" stroke="#00aaff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 47.5,62.5 A 10,10 0 1,0 27.5,62.5 A 10,10 0 1,0 47.5,62.5" fill="none" stroke="#00aad4" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 72.5,62.5 A 10,10 0 1,0 52.5,62.5 A 10,10 0 1,0 72.5,62.5" fill="none" stroke="#00aaaa" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 97.5,62.5 A 10,10 0 1,0 77.5,62.5 A 10,10 0 1,0 97.5,62.5" fill="none" stroke="#00aa7f" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 122.5,62.5 A 10,10 0 1,0 102.5,62.5 A 10,10 0 1,0 122.5,62.5" fill="none" stroke="#00aa55" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 147.5,62.5 A 10,10 0 1,0 127.5,62.5 A 10,10 0 1,0 147.5,62.5" fill="none" stroke="#00aa2a" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 22.5,87.5 A 10,10 0 1,0 2.5,87.5 A 10,10 0 1,0 22.5,87.5" fill="none" stroke="#007fff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 47.5,87.5 A 10,10 0 1,0 27.5,87.5 A 10,10 0 1,0 47.5,87.5" fill="none" stroke="#007fd4" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 72.5,87.5 A 10,10 0 1,0 52.5,87.5 A 10,10 0 1,0 72.5,87.5" fill="none" stroke="#007faa" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 97.5,87.5 A 10,10 0 1,0 77.5,87.5 A 10,10 0 1,0 97.5,87.5" fill="none" stroke="#007f7f" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 122.5,87.5 A 10,10 0 1,0 102.5,87.5 A 10,10 0 1,0 122.5,87.5" fill="none" stroke="#007f55" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 147.5,87.5 A 10,10 0 1,0 127.5,87.5 A 10,10 0 1,0 147.5,87.5" fill="none" stroke="#007f2a" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 22.5,112.5 A 10,10 0 1,0 2.5,112.5 A 10,10 0 1,0 22.5,112.5" fill="none" stroke="#0055ff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 47.5,112.5 A 10,10 0 1,0 27.5,112.5 A 10,10 0 1,0 47.5,112.5" fill="none" stroke="#0055d4" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 72.5,112.5 A 10,10 0 1,0 52.5,112.5 A 10,10 0 1,0 72.5,112.5" fill="none" stroke="#0055aa" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 97.5,112.5 A 10,10 0 1,0 77.5,112.5 A 10,10 0 1,0 97.5,112.5" fill="none" stroke="#00557f" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 122.5,112.5 A 10,10 0 1,0 102.5,112.5 A 10,10 0 1,0 122.5,112.5" fill="none" stroke="#005555" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 147.5,112.5 A 10,10 0 1,0 127.5,112.5 A 10,10 0 1,0 147.5,112.5" fill="none" stroke="#00552a" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 22.5,137.5 A 10,10 0 1,0 2.5,137.5 A 10,10 0 1,0 22.5,137.5" fill="none" stroke="#002aff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 47.5,137.5 A 10,10 0 1,0 27.5,137.5 A 10,10 0 1,0 47.5,137.5" fill="none" stroke="#002ad4" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 72.5,137.5 A 10,10 0 1,0 52.5,137.5 A 10,10 0 1,0 72.5,137.5" fill="none" stroke="#002aaa" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 97.5,137.5 A 10,10 0 1,0 77.5,137.5 A 10,10 0 1,0 97.5,137.5" fill="none" stroke="#002a7f" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 122.5,137.5 A 10,10 0 1,0 102.5,137.5 A 10,10 0 1,0 122.5,137.5" fill="none" stroke="#002a55" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 147.5,137.5 A 10,10 0 1,0 127.5,137.5 A 10,10 0 1,0 147.5,137.5" fill="none" stroke="#002a2a" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> </svg>
16: globalalpha	function(ctx) { // draw background ctx.fillStyle = '#FD0'; ctx.fillRect(0,0,75,75); ctx.fillStyle = '#6C0'; ctx.fillRect(75,0,75,75); ctx.fillStyle = '#09F'; ctx.fillRect(0,75,75,75); ctx.fillStyle = '#F30'; ctx.fillRect(75,75,75,75); ctx.fillStyle = '#FFF'; // set transparency value ctx.globalAlpha = 0.2; // Draw semi transparent circles for (i=0;i<7;i++){ ctx.beginPath(); ctx.arc(75,75,10+10i,0,Math.PI2,true); ctx.fill(); } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#ffdd00" height="75" stroke="none" width="75" x="0" y="0"/> <rect fill="#66cc00" height="75" stroke="none" width="75" x="75" y="0"/> <rect fill="#0099ff" height="75" stroke="none" width="75" x="0" y="75"/> <rect fill="#ff3300" height="75" stroke="none" width="75" x="75" y="75"/> <path d=" M 85,75 A 10,10 0 1,0 65,75 A 10,10 0 1,0 85,75" fill="#ffffff" opacity="0.2" stroke="none"/> <path d=" M 95,75 A 20,20 0 1,0 55,75 A 20,20 0 1,0 95,75" fill="#ffffff" opacity="0.2" stroke="none"/> <path d=" M 105,75 A 30,30 0 1,0 45,75 A 30,30 0 1,0 105,75" fill="#ffffff" opacity="0.2" stroke="none"/> <path d=" M 115,75 A 40,40 0 1,0 35,75 A 40,40 0 1,0 115,75" fill="#ffffff" opacity="0.2" stroke="none"/> <path d=" M 125,75 A 50,50 0 1,0 25,75 A 50,50 0 1,0 125,75" fill="#ffffff" opacity="0.2" stroke="none"/> <path d=" M 135,75 A 60,60 0 1,0 15,75 A 60,60 0 1,0 135,75" fill="#ffffff" opacity="0.2" stroke="none"/> <path d=" M 145,75 A 70,70 0 1,0 5,75 A 70,70 0 1,0 145,75" fill="#ffffff" opacity="0.2" stroke="none"/> </svg>
17: rgba	function(ctx) { // Draw background ctx.fillStyle = 'rgb(255,221,0)'; ctx.fillRect(0,0,150,37.5); ctx.fillStyle = 'rgb(102,204,0)'; ctx.fillRect(0,37.5,150,37.5); ctx.fillStyle = 'rgb(0,153,255)'; ctx.fillRect(0,75,150,37.5); ctx.fillStyle = 'rgb(255,51,0)'; ctx.fillRect(0,112.5,150,37.5); // Draw semi transparent rectangles for (i=0;i<10;i++){ ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; for (j=0;j<4;j++){ ctx.fillRect(5+i14,5+j37.5,14,27.5) } } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#ffdd00" height="37.5" stroke="none" width="150" x="0" y="0"/> <rect fill="#66cc00" height="37.5" stroke="none" width="150" x="0" y="37.5"/> <rect fill="#0099ff" height="37.5" stroke="none" width="150" x="0" y="75"/> <rect fill="#ff3300" height="37.5" stroke="none" width="150" x="0" y="112.5"/> <rect fill="#ffffff" fill-opacity="0.1" height="27.5" stroke="none" width="14" x="5" y="5"/> <rect fill="#ffffff" fill-opacity="0.1" height="27.5" stroke="none" width="14" x="5" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.1" height="27.5" stroke="none" width="14" x="5" y="80"/> <rect fill="#ffffff" fill-opacity="0.1" height="27.5" stroke="none" width="14" x="5" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.2" height="27.5" stroke="none" width="14" x="19" y="5"/> <rect fill="#ffffff" fill-opacity="0.2" height="27.5" stroke="none" width="14" x="19" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.2" height="27.5" stroke="none" width="14" x="19" y="80"/> <rect fill="#ffffff" fill-opacity="0.2" height="27.5" stroke="none" width="14" x="19" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.3" height="27.5" stroke="none" width="14" x="33" y="5"/> <rect fill="#ffffff" fill-opacity="0.3" height="27.5" stroke="none" width="14" x="33" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.3" height="27.5" stroke="none" width="14" x="33" y="80"/> <rect fill="#ffffff" fill-opacity="0.3" height="27.5" stroke="none" width="14" x="33" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.4" height="27.5" stroke="none" width="14" x="47" y="5"/> <rect fill="#ffffff" fill-opacity="0.4" height="27.5" stroke="none" width="14" x="47" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.4" height="27.5" stroke="none" width="14" x="47" y="80"/> <rect fill="#ffffff" fill-opacity="0.4" height="27.5" stroke="none" width="14" x="47" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.5" height="27.5" stroke="none" width="14" x="61" y="5"/> <rect fill="#ffffff" fill-opacity="0.5" height="27.5" stroke="none" width="14" x="61" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.5" height="27.5" stroke="none" width="14" x="61" y="80"/> <rect fill="#ffffff" fill-opacity="0.5" height="27.5" stroke="none" width="14" x="61" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.6" height="27.5" stroke="none" width="14" x="75" y="5"/> <rect fill="#ffffff" fill-opacity="0.6" height="27.5" stroke="none" width="14" x="75" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.6" height="27.5" stroke="none" width="14" x="75" y="80"/> <rect fill="#ffffff" fill-opacity="0.6" height="27.5" stroke="none" width="14" x="75" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.7" height="27.5" stroke="none" width="14" x="89" y="5"/> <rect fill="#ffffff" fill-opacity="0.7" height="27.5" stroke="none" width="14" x="89" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.7" height="27.5" stroke="none" width="14" x="89" y="80"/> <rect fill="#ffffff" fill-opacity="0.7" height="27.5" stroke="none" width="14" x="89" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.8" height="27.5" stroke="none" width="14" x="103" y="5"/> <rect fill="#ffffff" fill-opacity="0.8" height="27.5" stroke="none" width="14" x="103" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.8" height="27.5" stroke="none" width="14" x="103" y="80"/> <rect fill="#ffffff" fill-opacity="0.8" height="27.5" stroke="none" width="14" x="103" y="117.5"/> <rect fill="#ffffff" fill-opacity="0.9" height="27.5" stroke="none" width="14" x="117" y="5"/> <rect fill="#ffffff" fill-opacity="0.9" height="27.5" stroke="none" width="14" x="117" y="42.5"/> <rect fill="#ffffff" fill-opacity="0.9" height="27.5" stroke="none" width="14" x="117" y="80"/> <rect fill="#ffffff" fill-opacity="0.9" height="27.5" stroke="none" width="14" x="117" y="117.5"/> <rect fill="#ffffff" height="27.5" stroke="none" width="14" x="131" y="5"/> <rect fill="#ffffff" height="27.5" stroke="none" width="14" x="131" y="42.5"/> <rect fill="#ffffff" height="27.5" stroke="none" width="14" x="131" y="80"/> <rect fill="#ffffff" height="27.5" stroke="none" width="14" x="131" y="117.5"/> </svg>
18: linewidth	function(ctx) { for (i=0;i<10;i++){ ctx.lineWidth = 1+i; ctx.beginPath(); ctx.moveTo(5+i14,5); ctx.lineTo(5+i14,140); ctx.stroke(); } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M 5,5 L 5,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"/> <path d=" M 19,5 L 19,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2"/> <path d=" M 33,5 L 33,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="3"/> <path d=" M 47,5 L 47,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="4"/> <path d=" M 61,5 L 61,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="5"/> <path d=" M 75,5 L 75,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="6"/> <path d=" M 89,5 L 89,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="7"/> <path d=" M 103,5 L 103,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="8"/> <path d=" M 117,5 L 117,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9"/> <path d=" M 131,5 L 131,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="10"/> </svg>
19: linecap	function(ctx) { var lineCap = ['butt','round','square']; // Draw guides ctx.strokeStyle = '#09f'; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(140,10); ctx.moveTo(10,140); ctx.lineTo(140,140); ctx.stroke(); // Draw lines ctx.strokeStyle = 'black'; for (i=0;i<lineCap.length;i++){ ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25+i50,10); ctx.lineTo(25+i50,140); ctx.stroke(); } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="none" stroke="#0099ff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1"> <path d=" M 10,10 L 140,10"/> <path d=" M 10,140 L 140,140"/> </g> <path d=" M 25,10 L 25,140" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="15"/> <path d=" M 75,10 L 75,140" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="15"/> <path d=" M 125,10 L 125,140" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-width="15"/> </svg>
20: linejoin	function(ctx) { var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; for (i=0;i<lineJoin.length;i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5,5+i40); ctx.lineTo(35,45+i40); ctx.lineTo(75,5+i40); ctx.lineTo(115,45+i40); ctx.lineTo(155,5+i*40); ctx.stroke(); } }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d=" M -5,5 L 35,45 L 75,5 L 115,45 L 155,5" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="round" stroke-width="10"/> <path d=" M -5,45 L 35,85 L 75,45 L 115,85 L 155,45" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="10"/> <path d=" M -5,85 L 35,125 L 75,85 L 115,125 L 155,85" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="10"/> </svg>
21: miterlimit	function(ctx) { // Clear canvas ctx.clearRect(0,0,150,150); // Draw guides ctx.strokeStyle = '#09f'; ctx.lineWidth = 2; ctx.strokeRect(-5,50,160,50); // Set line styles ctx.strokeStyle = '#000'; ctx.lineWidth = 10; // check input ctx.miterLimit = 5; // Draw lines ctx.beginPath(); ctx.moveTo(0,100); for (i=0;i<24;i++){ var dy = i%2==0 ? 25 : -25 ; ctx.lineTo(Math.pow(i,1.5)*2,75+dy); } ctx.stroke(); return false; }	<svg baseProfile="full" height="200" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="white" fill-opacity="1" fill-rule="nonzero" height="150" width="150" x="0" y="0"/> <rect fill="none" height="50" stroke="#0099ff" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" width="160" x="-5" y="50"/> <path d=" M 0,100 L 0,100 L 2,50 L 5.656854152679443,100 L 10.392304420471191,50 L 16,100 L 22.360679626464844,50 L 29.393877029418945,100 L 37.04051971435547,50 L 45.25483322143555,100 L 54,50 L 63.24555206298828,100 L 72.96574401855469,50 L 83.13843536376953,100 L 93.74433135986328,50 L 104.76640319824219,100 L 116.18949890136719,50 L 128,100 L 140.1855926513672,50 L 152.7350616455078,100 L 165.63815307617188,50 L 178.88543701171875,100 L 192.4681854248047,50 L 206.3782958984375,100 L 220.60824584960938,50" fill="none" stroke="#000000" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="5" stroke-width="10"/> </svg>

SVGCanvas Test Suite