HTML 5 canvas music symbols examples


Symbol and code
Original 1/128 note stem down image

Original 1/128 note stem down
Canvas rendered 1/128 note stem down



      
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 note stem down HTML 5 canvas example</title>
Line 6         :  
Line 7         :      <!--
Line 8         :      Music symbol 1/128 note stem down 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       :              var x = 11;
Line 35       :              var y = 65;
Line 36       :        
Line 37       :              drawNote128(ctx,x,y);
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 drawNote128(ctx,x,y){       
Line 45       :        drawNoteHeadClosed(ctx,x,y);
Line 46       :        drawNoteStemDown(ctx,x,y);
Line 47       :        drawNoteFlagUp(ctx,x,y);
Line 48       :      }
Line 49       :      
Line 50       :      function drawNoteHeadClosed(ctx,x,y){
Line 51       :      
Line 52       :        var x_offset_head = 12; 
Line 53       :        var y_center_head = 74; 
Line 54       :        
Line 55       :        var x_corner = x - x_offset_head;
Line 56       :        var y_corner = y - y_center_head;
Line 57       :        
Line 58       :        ctx.save();
Line 59       :        
Line 60       :        ctx.translate(x_corner,y_corner);
Line 61       :        
Line 62       :        ctx.beginPath();
Line 63       :        ctx.moveTo(13,86);
Line 64       :      
Line 65       :        ctx.quadraticCurveTo(13,118,42,126);
Line 66       :        ctx.quadraticCurveTo(67,129,101,108);
Line 67       :        ctx.quadraticCurveTo(136,85,142,57);
Line 68       :        ctx.quadraticCurveTo(142,28,112,19);
Line 69       :        ctx.quadraticCurveTo(88,16,54,36);
Line 70       :        ctx.quadraticCurveTo(19,59,13,86);
Line 71       :        ctx.fill();
Line 72       :   
Line 73       :        ctx.restore();    
Line 74       :      }
Line 75       :      
Line 76       :      function drawNoteStemDown(ctx,x,y){
Line 77       :      
Line 78       :        var stem_height = 338;
Line 79       :  
Line 80       :        var x_delta_stem = 12;
Line 81       :        var y_delta_stem = 36;
Line 82       :  
Line 83       :        var x_offset_stem = 138;
Line 84       :        var y_offset_stem = 360;
Line 85       :  
Line 86       :        var x_corner = x + x_delta_stem - x_offset_stem; 
Line 87       :        var y_corner = y + y_delta_stem + stem_height - y_offset_stem;
Line 88       :                 
Line 89       :        ctx.save();
Line 90       :        
Line 91       :        ctx.translate(x_corner,y_corner);
Line 92       :            
Line 93       :        ctx.fillStyle = "black";
Line 94       :        ctx.beginPath();
Line 95       :        ctx.moveTo(127,4);
Line 96       :        ctx.lineTo(135,4);
Line 97       :        ctx.lineTo(135,342);
Line 98       :        ctx.lineTo(127,342);
Line 99       :        ctx.fill();   
Line 100     :        
Line 101     :        ctx.restore();  
Line 102     :      }   
Line 103     :  
Line 104     :      function drawNoteFlagUp(ctx,x,y){
Line 105     :  
Line 106     :        var number_of_flags = 5;
Line 107     :  
Line 108     :        var x_delta_stem = 12; 
Line 109     :        var y_delta_stem = 36;  
Line 110     :  
Line 111     :        var stem_height = 338;
Line 112     :  
Line 113     :        var x_offset_stem = 138;
Line 114     :        var y_offset_stem = 360;
Line 115     :  
Line 116     :        var x_offset_flag = 17;
Line 117     :        var y_offset_flag = 157;
Line 118     :    
Line 119     :        var x_corner = x + x_delta_stem - x_offset_flag; 
Line 120     :        var y_corner = y + y_delta_stem + stem_height - y_offset_flag;
Line 121     :        var flag_distance = 40;
Line 122     :     
Line 123     :        for(var i=1; i<=number_of_flags; i++) {
Line 124     :          ctx.save();
Line 125     :          if(i==1) {
Line 126     :            ctx.translate(x_corner,y_corner);
Line 127     :          } else {
Line 128     :            ctx.translate(0,(-1*flag_distance));
Line 129     :          }
Line 130     :          
Line 131     :          ctx.fillStyle = "black";
Line 132     :          
Line 133     :          ctx.beginPath();
Line 134     :          ctx.moveTo(14,86);   
Line 135     :          ctx.quadraticCurveTo(14,108,14,133);
Line 136     :          ctx.quadraticCurveTo(24,113,40,102);
Line 137     :          ctx.quadraticCurveTo(56,90,85,67);
Line 138     :          ctx.quadraticCurveTo(101,55,110,38);
Line 139     :          ctx.quadraticCurveTo(115,24,113,9);
Line 140     :          ctx.quadraticCurveTo(112,9,111,9);
Line 141     :          ctx.quadraticCurveTo(111,24,102,36);
Line 142     :          ctx.quadraticCurveTo(76,66,39,79);
Line 143     :          ctx.quadraticCurveTo(27,83,14,86);
Line 144     :          ctx.fill();     
Line 145     :        }
Line 146     :              
Line 147     :        ctx.restore();        
Line 148     :      }
Line 149     :  
Line 150     :      
Line 151     :      </script>
Line 152     :    </head>
Line 153     :    <body onload="drawShape();">
Line 154     :      <h1>1/128 note stem down</h1>
Line 155     :      <canvas id="cssxCoordinates" width="300" height="435"></canvas> 
Line 156     :    </body>
Line 157     :  </html>