HTML 5 canvas music symbols examples


Symbol and code
Original treble clef image

Original treble clef
Canvas rendered treble clef



      
Download file


Line 1         :  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
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>