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 - Alto clef HTML 5 canvas example</title>
Line 6 :
Line 7 : <!--
Line 8 : Music symbol alto 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(100, 235);
Line 36 : ctx.quadraticCurveTo(125,225,137,200);
Line 37 : ctx.quadraticCurveTo(153,166,154,126);
Line 38 : ctx.quadraticCurveTo(156,126,157,126);
Line 39 : ctx.quadraticCurveTo(155,159,174,188);
Line 40 : ctx.quadraticCurveTo(187,205,209,201);
Line 41 : ctx.quadraticCurveTo(236,194,246,168);
Line 42 : ctx.quadraticCurveTo(259,108,238,55);
Line 43 : ctx.quadraticCurveTo(228,27,201,22);
Line 44 : ctx.quadraticCurveTo(179,21,161,37);
Line 45 : ctx.quadraticCurveTo(178,38,188,51);
Line 46 : ctx.quadraticCurveTo(197,64,190,80);
Line 47 : ctx.quadraticCurveTo(180,93,164,93);
Line 48 : ctx.quadraticCurveTo(147,91,141,75);
Line 49 : ctx.quadraticCurveTo(134,60,141,45);
Line 50 : ctx.quadraticCurveTo(157,23,184,13);
Line 51 : ctx.quadraticCurveTo(217,6,248,23);
Line 52 : ctx.quadraticCurveTo(276,41,291,71);
Line 53 : ctx.quadraticCurveTo(301,91,301,113);
Line 54 : ctx.quadraticCurveTo(301,135,293,156);
Line 55 : ctx.quadraticCurveTo(276,190,242,210);
Line 56 : ctx.quadraticCurveTo(228,218,210,220);
Line 57 : ctx.quadraticCurveTo(194,223,178,217);
Line 58 : ctx.quadraticCurveTo(167,214,161,204);
Line 59 : ctx.quadraticCurveTo(161,220,142,235);
Line 60 : ctx.quadraticCurveTo(116,235,100,235);
Line 61 : ctx.fill();
Line 62 :
Line 63 : ctx.beginPath();
Line 64 : ctx.moveTo(4,12);
Line 65 : ctx.fillRect(4,12,59,223);
Line 66 : ctx.fillRect(83,12,17,223);
Line 67 :
Line 68 : ctx.beginPath();
Line 69 : ctx.moveTo(100,235);
Line 70 : ctx.quadraticCurveTo(125,245,137,269);
Line 71 : ctx.quadraticCurveTo(153,303,154,343);
Line 72 : ctx.quadraticCurveTo(156,343,157,343);
Line 73 : ctx.quadraticCurveTo(155,310,174,281);
Line 74 : ctx.quadraticCurveTo(187,265,209,268);
Line 75 : ctx.quadraticCurveTo(236,276,246,301);
Line 76 : ctx.quadraticCurveTo(259,361,238,414);
Line 77 : ctx.quadraticCurveTo(228,443,201,447);
Line 78 : ctx.quadraticCurveTo(179,448,161,433);
Line 79 : ctx.quadraticCurveTo(178,432,188,418);
Line 80 : ctx.quadraticCurveTo(197,405,190,390);
Line 81 : ctx.quadraticCurveTo(180,376,164,376);
Line 82 : ctx.quadraticCurveTo(147,379,141,394);
Line 83 : ctx.quadraticCurveTo(134,410,141,424);
Line 84 : ctx.quadraticCurveTo(157,446,184,456);
Line 85 : ctx.quadraticCurveTo(217,464,248,446);
Line 86 : ctx.quadraticCurveTo(276,428,291,399);
Line 87 : ctx.quadraticCurveTo(301,379,301,356);
Line 88 : ctx.quadraticCurveTo(301,334,293,313);
Line 89 : ctx.quadraticCurveTo(276,279,242,259);
Line 90 : ctx.quadraticCurveTo(228,251,210,249);
Line 91 : ctx.quadraticCurveTo(194,247,178,252);
Line 92 : ctx.quadraticCurveTo(167,256,161,266);
Line 93 : ctx.quadraticCurveTo(161,249,142,235);
Line 94 : ctx.quadraticCurveTo(116,235,100,235);
Line 95 : ctx.fill();
Line 96 :
Line 97 : ctx.beginPath();
Line 98 : ctx.moveTo(4,235);
Line 99 : ctx.fillRect(4,235,59,223);
Line 100 : ctx.fillRect(83,235,17,223);
Line 101 :
Line 102 : } else {
Line 103 : alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.');
Line 104 : }
Line 105 : }
Line 106 : </script>
Line 107 : </head>
Line 108 : <body onload="drawShape();">
Line 109 : <h1>Alto clef</h1>
Line 110 : <canvas id="cssxCoordinates" width="310" height="460"></canvas>
Line 111 : </body>
Line 112 : </html>