html5-canvas

问题 I am unable to draw correctly after scaling. The aim is to allow users to draw rectangles on the image. I am using canvas to display the image and then draw rectangles on image, this is working fine. But now I am trying to add zoom in and zoom out functionality. I need to move the rectangle after zooming in/out , I am able to do so correctly. I have 3 arrays where I am saving the rectangle coordinates: drawItems : Initial rectangle coordinates on draw currentItems : Coordinates after scaling

问题 What I'd like to achieve: I need to load different images in different canvas, move and resize them and show a preview. I'm using fabricJs. With rectangular canvas everything works fine, the problem is when I want to concatenate canvas with a diagonal section. Something like this: I tried something with the transform property in CSS, but then I could no longer interract with the canvas. Any idea on how to do this? Or is there a way to have only one canvas with something like sections? What I

问题 I'm trying to find a way to drag and drop polygon point or line with javascript in html5 canvas by selecting a path points with mouse click on it Kind like image below the selected points are moved by clicking and dragging them into new position var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(

问题 I would like to print an emoji on html canvas. It can be done using images, but it is cumbersome. Is there a better way? const canvas = document.querySelector("#canvas"); const contex = canvas.getContext("2d"); var img = new Image(); img.src = "emoji.jpg"; img.addEventListener( "load", () => { context.drawImage(img, 0, 0, 200, 200); } ); img.src = "img.jpg"; #canvas { background: red; } <canvas id="canvas"></canvas> Edit: Okey, I think my question is misunderstood. I am able to draw emoji as

问题 I would like to print an emoji on html canvas. It can be done using images, but it is cumbersome. Is there a better way? const canvas = document.querySelector("#canvas"); const contex = canvas.getContext("2d"); var img = new Image(); img.src = "emoji.jpg"; img.addEventListener( "load", () => { context.drawImage(img, 0, 0, 200, 200); } ); img.src = "img.jpg"; #canvas { background: red; } <canvas id="canvas"></canvas> Edit: Okey, I think my question is misunderstood. I am able to draw emoji as

问题 My code is: var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.canvas.width = 40vw; ctx.canvas.height = 40vh; and it doesn't work. Is it possible to use vw and vh when setting canvas dimensions in JavaScript? If so, how? 回答1: I realised I could use document.documentElement.clientWidth and document.documentElement.clientHeight to work out the vw and vh respectively. 回答2: HTML: <canvas class="canvas_hangman"></canvas> JS: function setUpCanvas() { canvas =

问题 My code is: var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.canvas.width = 40vw; ctx.canvas.height = 40vh; and it doesn't work. Is it possible to use vw and vh when setting canvas dimensions in JavaScript? If so, how? 回答1: I realised I could use document.documentElement.clientWidth and document.documentElement.clientHeight to work out the vw and vh respectively. 回答2: HTML: <canvas class="canvas_hangman"></canvas> JS: function setUpCanvas() { canvas =

问题 My code is: var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.canvas.width = 40vw; ctx.canvas.height = 40vh; and it doesn't work. Is it possible to use vw and vh when setting canvas dimensions in JavaScript? If so, how? 回答1: I realised I could use document.documentElement.clientWidth and document.documentElement.clientHeight to work out the vw and vh respectively. 回答2: HTML: <canvas class="canvas_hangman"></canvas> JS: function setUpCanvas() { canvas =

问题 I have written a Windows 8 game metro style using Javascript. I have a problem that makes the game too slow when I set gameContext with shadow or transparent. ctx.shadowColor="black"; ctx.shadowBlur = 10; ctx.globalCompositeOperation = "lighter"; ctx.globalAlpha = 0.3; How can I improve the game's performance? 回答1: Well… Don’t use shadows because they are the enemy of performance: http://www.html5rocks.com/en/tutorials/canvas/performance/ But, you can get shadowed results without using

问题 I have written a Windows 8 game metro style using Javascript. I have a problem that makes the game too slow when I set gameContext with shadow or transparent. ctx.shadowColor="black"; ctx.shadowBlur = 10; ctx.globalCompositeOperation = "lighter"; ctx.globalAlpha = 0.3; How can I improve the game's performance? 回答1: Well… Don’t use shadows because they are the enemy of performance: http://www.html5rocks.com/en/tutorials/canvas/performance/ But, you can get shadowed results without using