+ 2

How to translate and rotate drawing in html5 without effecting another drawing.

When I try to translate first drawing and keep second drawing fixed second drawing also moves so I am trying to keep second drawing fixed at specified position and only translate first drawing when I change value of first translate function . My Code : - <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.translate(10,10); ctx.fillRect(70,40,44,30); ctx.fillRect(10,10,40,30); </script> </body> </html>

javascript html5 canvas

8th Aug 2017, 7:38 AM

NIrik Shan

3 Answers

+ 7

separate first drawing and second drawing with different id and/or variable. hope it help.

8th Aug 2017, 7:44 AM

Amethyst Animion

+ 6

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var gtx = c.get context("2d"); ctx.translate(10,10); ctx.fillRect(70,40,44,30); gtx.fillRect(10,10,40,30); </script> </body> </html> hope it help

8th Aug 2017, 7:48 AM

Amethyst Animion

+ 3

hi! you can use save() and restore(): ctx.save(); // saves the context's transform/state ctx.rotate(...);. // changes the transform ctx.fillRect(...); ctx.restore(); // restores last saved transf/state ctx.fillRect(...); // works as if rotate was nvr called

8th Aug 2017, 5:32 PM

Karbz P