Download file
Line 2 : "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Line 3 : <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Line 4 : <head>
Line 5 : <title>Mobilefish.com - Treble clef HTML 5 canvas example</title>
Line 6 :
Line 7 : <!--
Line 8 : Music symbol treble clef v. 2.0
Line 9 : Author: Robert Lie
Line 10 : www.mobilefish.com
Line 11 :
Line 12 : This file is public domain. You can use it for any purpose without restriction.
Line 13 : I do not guarantee that it is correct, so use it at your own risk.
Line 14 : If you use it for something interesting, I'd appreciate hearing about it.
Line 15 : If you find any bugs or make any improvements, I'd appreciate hearing about those too.
Line 16 : It would also be nice if my name and URL were left in the comments. But none of that is required.
Line 17 :
Line 18 : Requires: File excanvas.compiled.js
Line 19 : HTML5 Canvas for Internet Explorer
Line 20 : See: http://code.google.com/p/explorercanvas/
Line 21 : -->
Line 22 :
Line 23 : <!--[if IE]>
Line 24 : <script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
Line 25 : <![endif]-->
Line 26 : <script type="text/javascript">
Line 27 :
Line 28 :
Line 29 : function drawShape(){
Line 30 : var canvas = document.getElementById('cssxCoordinates');
Line 31 : if (canvas.getContext){
Line 32 : var ctx = canvas.getContext('2d');
Line 33 :
Line 34 : ctx.beginPath();
Line 35 : ctx.moveTo(159,3);
Line 36 : ctx.quadraticCurveTo(129,50,117,93);
Line 37 : ctx.quadraticCurveTo(107,126,102,167);
Line 38 : ctx.quadraticCurveTo(101,192,102,210);
Line 39 : ctx.quadraticCurveTo(107,255,116,297);
Line 40 : ctx.quadraticCurveTo(63,351,44,375);
Line 41 : ctx.quadraticCurveTo(24,401,15,429);
Line 42 : ctx.quadraticCurveTo(2,464,3,503);
Line 43 : ctx.quadraticCurveTo(5,540,20,575);
Line 44 : ctx.quadraticCurveTo(29,596,48,615);
Line 45 : ctx.quadraticCurveTo(62,630,87,645);
Line 46 : ctx.quadraticCurveTo(113,660,150,666);
Line 47 : ctx.quadraticCurveTo(177,668,194,665);
Line 48 : ctx.quadraticCurveTo(204,720,213,776);
Line 49 : ctx.quadraticCurveTo(216,795,216,813);
Line 50 : ctx.quadraticCurveTo(203,849,158,857);
Line 51 : ctx.quadraticCurveTo(132,857,120,842);
Line 52 : ctx.quadraticCurveTo(152,845,166,813);
Line 53 : ctx.quadraticCurveTo(165,821,168,802);
Line 54 : ctx.quadraticCurveTo(166,775,151,765);
Line 55 : ctx.quadraticCurveTo(132,750,107,758);
Line 56 : ctx.quadraticCurveTo(86,768,78,789);
Line 57 : ctx.quadraticCurveTo(71,818,90,840);
Line 58 : ctx.quadraticCurveTo(105,857,129,865);
Line 59 : ctx.quadraticCurveTo(149,872,177,865);
Line 60 : ctx.quadraticCurveTo(194,860,209,846);
Line 61 : ctx.quadraticCurveTo(231,828,230,803);
Line 62 : ctx.quadraticCurveTo(221,735,207,662);
Line 63 : ctx.quadraticCurveTo(248,650,267,626);
Line 64 : ctx.quadraticCurveTo(293,599,296,566);
Line 65 : ctx.quadraticCurveTo(300,527,285,494);
Line 66 : ctx.quadraticCurveTo(270,462,234,444);
Line 67 : ctx.quadraticCurveTo(215,435,189,435);
Line 68 : ctx.quadraticCurveTo(177,435,164,438);
Line 69 : ctx.quadraticCurveTo(155,396,146,354);
Line 70 : ctx.quadraticCurveTo(183,315,203,275);
Line 71 : ctx.quadraticCurveTo(219,243,222,210);
Line 72 : ctx.quadraticCurveTo(227,167,221,137);
Line 73 : ctx.quadraticCurveTo(213,93,192,51);
Line 74 : ctx.quadraticCurveTo(180,29,159,3);
Line 75 :
Line 76 : ctx.fill();
Line 77 :
Line 78 : ctx.fillStyle = "white";
Line 79 : ctx.beginPath();
Line 80 : ctx.moveTo(191,93);
Line 81 : ctx.quadraticCurveTo(179,83,171,93);
Line 82 : ctx.quadraticCurveTo(126,162,131,281);
Line 83 : ctx.quadraticCurveTo(188,239,203,188);
Line 84 : ctx.quadraticCurveTo(209,162,204,135);
Line 85 : ctx.quadraticCurveTo(200,111,191,93);
Line 86 : ctx.fill();
Line 87 :
Line 88 : ctx.fillStyle = "white";
Line 89 : ctx.beginPath();
Line 90 : ctx.moveTo(171,473);
Line 91 : ctx.quadraticCurveTo(188,555,206,648);
Line 92 : ctx.quadraticCurveTo(237,639,255,620);
Line 93 : ctx.quadraticCurveTo(283,588,283,558);
Line 94 : ctx.quadraticCurveTo(285,525,269,501);
Line 95 : ctx.quadraticCurveTo(252,476,216,470);
Line 96 : ctx.quadraticCurveTo(194,465,171,473);
Line 97 :
Line 98 : ctx.fill();
Line 99 :
Line 100 : ctx.fillStyle = "white";
Line 101 : ctx.beginPath();
Line 102 : ctx.moveTo(147,446);
Line 103 : ctx.quadraticCurveTo(141,411,132,369);
Line 104 : ctx.quadraticCurveTo(90,401,68,435);
Line 105 : ctx.quadraticCurveTo(45,467,39,503);
Line 106 : ctx.quadraticCurveTo(30,540,45,576);
Line 107 : ctx.quadraticCurveTo(60,612,92,633);
Line 108 : ctx.quadraticCurveTo(123,651,161,654);
Line 109 : ctx.quadraticCurveTo(174,654,188,653);
Line 110 : ctx.fill();
Line 111 :
Line 112 : ctx.fillStyle = "black";
Line 113 : ctx.beginPath();
Line 114 : ctx.moveTo(147,444);
Line 115 : ctx.quadraticCurveTo(120,456,101,480);
Line 116 : ctx.quadraticCurveTo(83,504,84,536);
Line 117 : ctx.quadraticCurveTo(86,567,107,588);
Line 118 : ctx.quadraticCurveTo(114,597,126,605);
Line 119 : ctx.quadraticCurveTo(116,593,107,581);
Line 120 : ctx.quadraticCurveTo(95,560,99,537);
Line 121 : ctx.quadraticCurveTo(105,509,132,491);
Line 122 : ctx.quadraticCurveTo(143,482,164,476);
Line 123 :
Line 124 : ctx.fill();
Line 125 :
Line 126 : } else {
Line 127 : alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.');
Line 128 : }
Line 129 : }
Line 130 : </script>
Line 131 : </head>
Line 132 : <body onload="drawShape();">
Line 133 : <h1>Treble clef</h1>
Line 134 : <canvas id="cssxCoordinates" width="310" height="890"></canvas>
Line 135 : </body>
Line 136 : </html>