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 - Bass clef HTML 5 canvas example</title>
Line 6 :
Line 7 : <!--
Line 8 : Music symbol bass 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(18,354);
Line 36 : ctx.quadraticCurveTo(18,351,18,347);
Line 37 : ctx.quadraticCurveTo(80,326,98,311);
Line 38 : ctx.quadraticCurveTo(161,268,173,239);
Line 39 : ctx.quadraticCurveTo(183,219,187,199);
Line 40 : ctx.quadraticCurveTo(194,142,194,117);
Line 41 : ctx.quadraticCurveTo(194,100,191,83);
Line 42 : ctx.quadraticCurveTo(189,68,181,53);
Line 43 : ctx.quadraticCurveTo(175,38,161,29);
Line 44 : ctx.quadraticCurveTo(148,19,131,17);
Line 45 : ctx.quadraticCurveTo(120,16,109,18);
Line 46 : ctx.quadraticCurveTo(98,19,88,24);
Line 47 : ctx.quadraticCurveTo(67,32,52,50);
Line 48 : ctx.quadraticCurveTo(38,68,40,97);
Line 49 : ctx.quadraticCurveTo(52,86,69,88);
Line 50 : ctx.quadraticCurveTo(86,89,96,102);
Line 51 : ctx.quadraticCurveTo(101,108,105,122);
Line 52 : ctx.quadraticCurveTo(106,132,102,141);
Line 53 : ctx.quadraticCurveTo(93,157,77,160);
Line 54 : ctx.quadraticCurveTo(49,166,28,148);
Line 55 : ctx.quadraticCurveTo(9,128,14,100);
Line 56 : ctx.quadraticCurveTo(20,73,38,52);
Line 57 : ctx.quadraticCurveTo(56,31,82,23);
Line 58 : ctx.quadraticCurveTo(108,14,136,16);
Line 59 : ctx.quadraticCurveTo(164,16,188,26);
Line 60 : ctx.quadraticCurveTo(239,48,257,99);
Line 61 : ctx.quadraticCurveTo(267,137,256,174);
Line 62 : ctx.quadraticCurveTo(238,226,197,260);
Line 63 : ctx.quadraticCurveTo(152,299,107,321);
Line 64 : ctx.quadraticCurveTo(66,342,18,354);
Line 65 : ctx.fill();
Line 66 :
Line 67 : ctx.beginPath();
Line 68 : ctx.arc(298, 69, 17, 0, (2*Math.PI), true);
Line 69 : ctx.fill();
Line 70 :
Line 71 : ctx.beginPath();
Line 72 : ctx.arc(298, 184, 17, 0, (2*Math.PI), true);
Line 73 : ctx.fill();
Line 74 :
Line 75 : } else {
Line 76 : alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.');
Line 77 : }
Line 78 : }
Line 79 : </script>
Line 80 : </head>
Line 81 : <body onload="drawShape();">
Line 82 : <h1>Bass clef</h1>
Line 83 : <canvas id="cssxCoordinates" width="320" height="360"></canvas>
Line 84 : </body>
Line 85 : </html>