HTML 5 canvas music symbols examples


Symbol and code
Original cut common time

Original cut common time
Canvas rendered cut common time



      
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 - Cut common time HTML 5 canvas example</title>
Line 6         :  
Line 7         :      <!--
Line 8         :      Music symbol cut common time  v. 1.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(208,202);
Line 36       :              ctx.quadraticCurveTo(205,202,203,202);
Line 37       :              ctx.quadraticCurveTo(203,219,196,235);
Line 38       :              ctx.quadraticCurveTo(188,252,172,263);
Line 39       :              ctx.quadraticCurveTo(154,275,132,272); 
Line 40       :              ctx.quadraticCurveTo(111,269,100,250);
Line 41       :              ctx.quadraticCurveTo(87,230,84,204);
Line 42       :              ctx.quadraticCurveTo(82,189,82,172); 
Line 43       :              ctx.quadraticCurveTo(82,155,83,141);
Line 44       :              ctx.quadraticCurveTo(85,108,100,81); 
Line 45       :              ctx.quadraticCurveTo(112,65,131,64); 
Line 46       :              ctx.quadraticCurveTo(154,64,172,75);
Line 47       :              ctx.quadraticCurveTo(185,84,191,98);
Line 48       :              ctx.quadraticCurveTo(172,92,157,103);
Line 49       :              ctx.quadraticCurveTo(146,111,147,125);
Line 50       :              ctx.quadraticCurveTo(147,139,158,150);
Line 51       :              ctx.quadraticCurveTo(171,162,191,155); 
Line 52       :              ctx.quadraticCurveTo(208,146,210,125); 
Line 53       :              ctx.quadraticCurveTo(209,102,200,90); 
Line 54       :              ctx.quadraticCurveTo(192,76,173,65); 
Line 55       :              ctx.quadraticCurveTo(156,55,134,53); 
Line 56       :              ctx.quadraticCurveTo(106,52,80,66);
Line 57       :              ctx.quadraticCurveTo(56,80,41,109);
Line 58       :              ctx.quadraticCurveTo(25,137,26,171);
Line 59       :              ctx.quadraticCurveTo(26,205,42,233);
Line 60       :              ctx.quadraticCurveTo(56,261,81,275);
Line 61       :              ctx.quadraticCurveTo(100,287,132,287);
Line 62       :              ctx.quadraticCurveTo(157,286,177,271);
Line 63       :              ctx.quadraticCurveTo(193,258,201,238);
Line 64       :              ctx.quadraticCurveTo(209,220,208,202);
Line 65       :              ctx.fill();
Line 66       :              
Line 67       :              ctx.beginPath();
Line 68       :              ctx.moveTo(122,0);
Line 69       :              ctx.lineTo(122,342);
Line 70       :              ctx.lineTo(131,342);
Line 71       :              ctx.lineTo(131,0);
Line 72       :              ctx.fill();
Line 73       :                       
Line 74       :          } else {
Line 75       :              alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.');
Line 76       :          }
Line 77       :      }
Line 78       :      </script>
Line 79       :    </head>
Line 80       :    <body onload="drawShape();">
Line 81       :      <h1>Cut common time</h1>
Line 82       :      <canvas id="cssxCoordinates" width="266" height="352"></canvas> 
Line 83       :    </body>
Line 84       :  </html>