How do I rotate an object with the canvas api but nothing afterward?
Question
I'm trying to make a cartoon builder app and allow the user to rotate objects but when I'm testing it, it rotates everything behind it.I fixed the roation to 270 degrees for the question, I know how to do this in p5.js and processing.js but I wanna write this in canvas api.Does anyone know if there is something that works similar to p5's pop() and push() functions?
<doctype html> <html> <head> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <input type="number" placeholder="width" id="width"> <input type="number" placeholder="height" id="height"> </body> <script> var canvas=document.getElementById("canvas") var ctx=canvas.getContext("2d") ctx.rotate(270); ctx.fillRect(200,200,200,50); //line should be flat ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(150,100); ctx.closePath(); ctx.stroke(); </script> <style> canvas{ background-color:blue; } </style> </html>
1 answers
solution1
1 ACCPTED 2022-09-30 18:28:22
I think you want context.save(); and context.restore();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I rotate a single object on an html 5 canvas?
How to rotate object in the canvas
How do I rotate an object in canvas and js; my example is not rotating how I expect
How do I rotate a html canvas shape by only using a transform?
How do I rotate a diagram in canvas while keeping the numbers upright?
How do I rotate two images [on the same Canvas] in opposite directions?
How do I rotate, scale and translate on Html5 Canvas?
How do I rotate the entire canvas and an image drawn into the canvas at the same time?
How do I confine object creation to the canvas?
Rotate Moving Object on Canvas
Related Tags