Geek Answers Handbook

JQuery to make HTML5 Canvas Responsive

How can I customize HTML5 animation (Canvas) using jQuery?

Since my canvas is 1100 pixels wide by 800 pixels high (for a larger effect on large screens), I can create a size for screens smaller than 1200 pixels.

HTML:

<canvas id="canvas" width="1100" height="800" style="background-color:#ffffff"></canvas>

Script:

 var canvas, stage, exportRoot; function init() { canvas = document.getElementById("canvas"); images = images||{}; var manifest = [ {src:"images/preloader/_282.png", id:"_282"}, {src:"images/preloader/Bitmap10.png", id:"Bitmap10"}, {src:"images/preloader/Bitmap11.png", id:"Bitmap11"}, {src:"images/preloader/Bitmap12.png", id:"Bitmap12"}, {src:"images/preloader/Bitmap13.png", id:"Bitmap13"}, {src:"images/preloader/Bitmap14.png", id:"Bitmap14"}, {src:"images/preloader/Bitmap15.png", id:"Bitmap15"}, {src:"images/preloader/Bitmap16.png", id:"Bitmap16"}, {src:"images/preloader/Bitmap17.png", id:"Bitmap17"}, {src:"images/preloader/Bitmap18.png", id:"Bitmap18"}, {src:"images/preloader/Bitmap2.png", id:"Bitmap2"}, {src:"images/preloader/Bitmap3.png", id:"Bitmap3"}, {src:"images/preloader/Bitmap4.png", id:"Bitmap4"}, {src:"images/preloader/Bitmap5.png", id:"Bitmap5"}, {src:"images/preloader/Bitmap6.png", id:"Bitmap6"}, {src:"images/preloader/Bitmap7.png", id:"Bitmap7"}, {src:"images/preloader/Bitmap8.png", id:"Bitmap8"}, {src:"images/preloader/Bitmap9.png", id:"Bitmap9"}, {src:"images/preloader/flash0aiAssets.png", id:"flash0aiAssets"} ]; var loader = new createjs.LoadQueue(false); loader.addEventListener("fileload", handleFileLoad); loader.addEventListener("complete", handleComplete); loader.loadManifest(manifest); } function handleFileLoad(evt) { if (evt.item.type == "image") { images[evt.item.id] = evt.result; } } function handleComplete() { exportRoot = new lib.preloadercs6(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); createjs.Ticker.setFPS(24); createjs.Ticker.addEventListener("tick", stage); }

PS: Also, if there is any other way to do this, even without using jQuery, I am open to solving my problem.

thanks

UPDATE

I found something and put it together, but it does not work:

 (function($){ $(window).resize(function(){ windowResize(); }); })(jQuery); function windowResize(){ stage.canvas.width = window.innerWidth; stage.canvas.height = window.innerHeight; var test = (window.innerHeight/800)*1; exportRoot.scaleX = exportRoot.scaleY = test; }
+7
jquery html5 responsive-design canvas
source share
1 answer

I think you can do this with CSS.

eg.

 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>title</title> <!--[if lt IE 9]> HTML5Shiv <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> body { margin: 0; padding: 0; text-align: center; width: 100%; } .container { margin: 0; padding: 0; height: 100%; } #canvas { display: block; padding: 0; margin: 0 auto; background-color:red; } @media(max-width:1200px) { .container { margin: 0 50px; } #canvas { width: 100%; height: auto; background-color:red; } } </style> </head> <body> <div class="container"> <canvas width=1100 height=850 id="canvas"></canvas> </div> </body>

+11
source share

More articles:


All Articles