jQuery to make HTML5 Canvas Responsive

jquery html canvas responsive-design

18,177

I think you can do it using CSS.

e.g.

<!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>

18,177

Author by

Admin

Updated on June 19, 2022

Comments

Admin almost 2 years

How can I make my HTML5 Animation (Canvas) responsive using jQuery ?

Since my Canvas is 1100px Width by 800px Height (for a greater effect on bigger screens) I the canvas to start resizing for screens smaller than 1200 px width.

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 of doing it even without using jQuery, I'm open to whatever can solve my problem.

Thanks

UPDATE

I found something and put it together but it doesn't 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;
}