how to render offscreen canvas properly

html canvas html5-canvas

13,504

You could achieve this in the following way ...

function createOffscreenCanvas() {
    var offScreenCanvas = document.createElement('canvas');
    offScreenCanvas.width = '1360';
    offScreenCanvas.height = '400';
    var context = offScreenCanvas.getContext("2d");
    context.fillStyle = 'orange'; //set fill color
    context.fillRect(10, 10, 200, 200);
    return offScreenCanvas; //return canvas element
}

function copyToOnScreen(offScreenCanvas) {
    var onScreenContext = document.getElementById('onScreen').getContext('2d');
    onScreenContext.drawImage(offScreenCanvas, 0, 0);
}

function main() {
    copyToOnScreen(createOffscreenCanvas());
}

canvas {
  border: 1px solid black;
}

<body onload="main()">
<canvas id="onScreen" width="1360" height="400"></canvas>

note : never set canvas's width and height using css. instead use the native width and height property of the canvas.

13,504

Admin

Updated on June 25, 2022

Comments

Admin almost 2 years

I'm trying to create a basic example of offscreen rendering canvas but I'm error in js "cannot read property of context". actually my idea is to create a demo like I saw in https://yalantis.com/ I want to create my name initial. If there is any better idea to achieve this then please enlighten me. Thanks here is my basic attempt before the actual implementation :)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Off Screen Canvas</title>
<script>
    function createOffscreenCanvas() {
        var offScreenCanvas= document.createElement('canvas');
        offScreenCanvas.width= '1360px';
        offScreenCanvas.height= '400px';
        var context= offScreenCanvas.getContext("2d");
        context.fillRect(10,10,200,200);
    }
    function copyToOnScreen(offScreenCanvas) {
        var onScreenContext=document.getElementById('onScreen').getContext('2d');
        var offScreenContext=offScreenCanvas.getContext('2d');
        var image=offScreenCanvas.getImageData(10,10,200,200);
        onScreenContext.putImageData(image,0,0);
    }
    function main() {
        copyToOnScreen(createOffscreenCanvas());
    }
</script>
<style>
    #onScreen {
        width:1360px;
        height: 400px;
    }
</style>
</head>  
 <body onload="main()">
 <canvas id="onScreen"></canvas>
 </body>
</html>

Admin about 7 years

hey got rid of 1st error but now there is an error in getImageData
Admin about 7 years

hey man thanks! :) it's working fine. is it the right way to draw the mentioned example of yalantis and how do I can change rectangle color and fill particles within rectangle?
Admin about 7 years

yeah thanks for enlighten me how I can change its color where should i put fillStyle?
ɢʀᴜɴᴛ about 7 years

there are multiple ways to achieve this. this is one of them. not the best or worse but will do the job. you should go with what feels comfortable to you. and the mention example in yalantis is more complex. this is just the beginning
ɢʀᴜɴᴛ about 7 years

you can set the fillStyle before drawing the rectangle to change its color in the createOffscreenCanvas function. check edited answer
Admin about 7 years

thanks for enlighten me if you are aware of any tutorial or reference to learn this type of animation please guide me then I'm newbie :)
ɢʀᴜɴᴛ about 7 years

you should use canvas libraries (search on google) to achieve such animation more easily. for a start check out this video
Sanxofon almost 5 years

This a misleading answer as it is only a variable called offScreenCanvas but has no relation to OffscreenCanvas. It does not even work "offScreen".
Admin over 2 years

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
Candleout over 2 years

The answer states: "note : never set canvas's width and height using css. instead use the native width and height property of the canvas." Why is this so? Also, there is a third option to set width and height in javascript. Is that also not a good idea?
Candleout over 2 years

Do we know when this OffScreenCanvas will be fully (more or less) operational in Firefox?
fatih-erikli over 2 years

@Candleout I don't know but as far as I understand it is implemented but disabled with a feature flag in firefox preferences due to a bug. So the bug has some activity in the last days (and weeks), probably it will be fixed soon. bugzilla.mozilla.org/show_bug.cgi?id=1390089
Ghost Ops over 2 years

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
fatih-erikli over 2 years

I added an example, thanks for reminding :)