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 - 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>