HTML 5 canvas music symbols examples |
Symbol and code | |
Original notehead closed image
![]() |
Canvas rendered notehead closed
|
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 - Notehead closed HTML 5 canvas example</title> Line 6 : Line 7 : <!-- Line 8 : Music symbol notehead closed 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 : ctx.beginPath(); Line 35 : ctx.moveTo(13,86); Line 36 : ctx.quadraticCurveTo(13,118,42,126); Line 37 : ctx.quadraticCurveTo(67,129,101,108); Line 38 : ctx.quadraticCurveTo(136,85,142,57); Line 39 : ctx.quadraticCurveTo(142,28,112,19); Line 40 : ctx.quadraticCurveTo(88,16,54,36); Line 41 : ctx.quadraticCurveTo(19,59,13,86); Line 42 : ctx.fill(); Line 43 : Line 44 : } else { Line 45 : alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.'); Line 46 : } Line 47 : } Line 48 : </script> Line 49 : </head> Line 50 : <body onload="drawShape();"> Line 51 : <h1>Notehead closed</h1> Line 52 : <canvas id="cssxCoordinates" width="160" height="144"></canvas> Line 53 : </body> Line 54 : </html> |