javascript - Making a canvas as a background doesn't perform as anticipated -
so in question under impression using canvas background faster,or same speed using canvas tag. have rather bulky script running simulator. javascripting reasons cannot make menu using javascript without detracting simulation had planned use html make menu swipe side of screen. working on stumbled on above link; when run program using background method runs slower. there reason this, , there solution?
here relevant portions of code:
html
<html> <head> <title>curtain sim 2013 </title> <link href="global.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="main.js"></script> <script type="text/javascript" src="fabric.js"></script> <script type="text/javascript" src="background.js"></script> <script type="text/javascript" src="savdat.js"></script> </head> <div id = "canvas" style="width:100%; height:100%; background: -webkit-canvas(cursim2013); "></div> <!--<body> <canvas id="cursim2013"> browser not support html5 </canvas> </body>--> </html>
javascript main.js runs (there artifacts commented out experimenting)
function init() { //grab canvas tag index.html canvas = document.getelementbyid('canvas'); //create interface interacting canvas in 2d //context = canvas.getcontext('2d'); //var ctx = document.getcsscanvascontext("2d", "squares", w, h); //set dimensions of canvas match broser window //note global.css helps make possible canvas.width = window.innerwidth; canvas.height = window.innerheight; context = document.getcsscanvascontext("2d", "cursim2013", canvas.width, canvas.height); //erase contents of canvas context.clearrect(0, 0, canvas.width, canvas.height); . . .
css (nothing much)
html, body { width: 100%; height: 100%; margin: 0px; }
so ended doing (i don't know html @ all) changing css this:
html, body { width: 100%; height: 100%; margin: 0px; } canvas { position:absolute; left:0px; top:0px; z-index:-1; } div { position:absolute; left:0px; top:0px; z-index:1; color:rgb(255,0,255); }
and used canvas method. works , speed isn't effected.
new html
<html> <head> <title>curtain sim 2013 </title> <link href="global.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="main.js"></script> <script type="text/javascript" src="fabric.js"></script> <script type="text/javascript" src="background.js"></script> <script type="text/javascript" src="savdat.js"></script> </head> <!--<div id = "canvas" style="width:100%; height:100%; background: -webkit-canvas(cursim2013); position: absolute;"></div>--> <body> <div> <p> hi </p> </div> <canvas id="canvas"> browser not support html5 </canvas> </body> </html>
new javascript
function init() { //grab canvas tag index.html canvas = document.getelementbyid('canvas'); //create interface interacting canvas in 2d context = canvas.getcontext('2d'); //var ctx = document.getcsscanvascontext("2d", "squares", w, h); //set dimensions of canvas match broser window //note global.css helps make possible canvas.width = window.innerwidth; canvas.height = window.innerheight; . . .
Comments
Post a Comment