HTML 5 canvas music symbols examples


Symbol and code
Original 1/128 rest

Original 1/128 rest
Canvas rendered 1/128 rest



      
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 - 1/128 rest HTML 5 canvas example</title>
Line 6         :  
Line 7         :      <!--
Line 8         :      Music symbol 1/128 rest 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       :              var x = 0; // x_start 
Line 34       :              var y = 85; // y_start 
Line 35       :              var rest = 128; // 8, 16, 32, 64, 128
Line 36       :  
Line 37       :              drawRest(ctx,x,y,rest);
Line 38       :                       
Line 39       :          } else {
Line 40       :              alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.');
Line 41       :          }
Line 42       :      }
Line 43       :  
Line 44       :      function drawRest(ctx,x,y,rest){    
Line 45       :      
Line 46       :          var number_of_bullets = 0;  
Line 47       :          
Line 48       :          var x_offset_rest = 4;
Line 49       :          var y_offset_rest = 40;
Line 50       :          var x_delta_rest = 43;
Line 51       :          var y_delta_rest = 113;
Line 52       :          
Line 53       :          switch(rest) {
Line 54       :              case 8:
Line 55       :                  number_of_bullets = 1;
Line 56       :                  y = y + 174;
Line 57       :                  break;
Line 58       :              case 16:
Line 59       :                  number_of_bullets = 2;
Line 60       :                  y = y + 287;
Line 61       :                  break;
Line 62       :              case 32:
Line 63       :                  number_of_bullets = 3;
Line 64       :                  y = y + 287;
Line 65       :                  break;
Line 66       :              case 64:
Line 67       :                  number_of_bullets = 4;
Line 68       :                  y = y + 400;
Line 69       :                  break;
Line 70       :              case 128:
Line 71       :                  number_of_bullets = 5;
Line 72       :                  y = y + 400;
Line 73       :                  break;
Line 74       :          }
Line 75       :          
Line 76       :          var x_corner = x - x_offset_rest;
Line 77       :          var y_corner = y - y_offset_rest;
Line 78       :          
Line 79       :          for(var i=1; i<=number_of_bullets; i++) {
Line 80       :              ctx.save();
Line 81       :              if(i==1) {
Line 82       :                 ctx.translate(x_corner,y_corner);
Line 83       :              } else {
Line 84       :                 ctx.translate(x_delta_rest, -1*y_delta_rest);
Line 85       :              } 
Line 86       :          
Line 87       :              ctx.beginPath();
Line 88       :              ctx.moveTo(121,10);
Line 89       :              
Line 90       :              ctx.quadraticCurveTo(115,10,112,10);                                 
Line 91       :              ctx.quadraticCurveTo(106,25,99,44);
Line 92       :              ctx.quadraticCurveTo(88,55,77,58);                                   
Line 93       :              ctx.quadraticCurveTo(70,61,62,61); 
Line 94       :              ctx.quadraticCurveTo(72,51,71,40);                                
Line 95       :              ctx.quadraticCurveTo(72,28,64,20);
Line 96       :              ctx.quadraticCurveTo(53,7,37,7);                                     
Line 97       :              ctx.quadraticCurveTo(22,7,14,16);
Line 98       :              ctx.quadraticCurveTo(5,23,4,39);                                     
Line 99       :              ctx.quadraticCurveTo(4,54,13,63);
Line 100     :              ctx.quadraticCurveTo(23,73,37,74);                                  
Line 101     :              ctx.quadraticCurveTo(67,76,95,54);
Line 102     :              ctx.quadraticCurveTo(73,113,42,194);                                     
Line 103     :              ctx.quadraticCurveTo(47,194,51,194);
Line 104     :              ctx.quadraticCurveTo(104,54,121,10);
Line 105     :              
Line 106     :              ctx.fill();
Line 107     :          }
Line 108     :          
Line 109     :          ctx.restore();                            
Line 110     :      } 
Line 111     :      </script>
Line 112     :    </head>
Line 113     :    <body onload="drawShape();">
Line 114     :      <h1>1/128 rest</h1>
Line 115     :      <canvas id="cssxCoordinates" width="1000" height="1000"></canvas> 
Line 116     :    </body>
Line 117     :  </html>