I’ve been working on a game which requires thousands of very small images (20^20 px) to be rendered and rotated each frame. A sample snippet is provided. I’ve used every trick I know to speed it up to increase frame rates but I suspect there are other things I can do to optimise this. Current optimisations include: Replacing save/restore with
Tag: canvas
ChartJs 2 How to remove numbers from the doughnut chart on loading
So, I have this doughnut chart that on loading displays the data numbers on the chart segments. It clutters the chart and I cannot find a way to get it out. I tried: But, this removes the legend, not the labels on the chart. So, 1) how do I clean out the chart by removing these datalabels? 2) As seen
How can I magnify multiple elements on a canvas using the JavaScript magnifier?
I have a web page that displays an image excerpt from a document using drawimage(x,z,width,height). The user has the ability to draw a rectangle around any given line on the image by clicking the line. The image then has a rectangle drawn on it using rect(x,y,w,h). Using the JavaScript magnifier, the user can hover over the image to see a
how to affect hover elements behind canvas when drawing mouse trail
I have 8 flex-box columns where when you hover over it, images will show. I want to leave trails as my mouse move across the screen, so I used onmousemove to draw lines onto a canvas. However, when I put my canvas on top of the columns, the hover on the columns to reveal the photos no longer work. How
Update images in canvas input type file jCanvas
Im using jCanvas to make flyer editor with jQuery : https://projects.calebevans.me/jcanvas/ In my javascript, first i call my function initCanvas() to add layers to the canvas and it work well when the page load. As you can see in my demo, you can change text, date and time but when you want to change images with setLayer() function, the background
Why my canvas filter is not working even after rendering as canvas?
I am trying to develop a image filter using canvas.My image is converting to canvas as soon as it is loaded but the filter effect is not affecting the image at all,i.e., image is unchanged in canvas. Now i updated my javascript,it is working if the image is taken from other sites but if i am taking image from same
JS: Resizing canvas + redrawing elements on canvas
My question: What’s the best way to resize the canvas with all its drawn elements? I have 2 examples where I tried to archieve this. The first one works, but lacks functionality because if I would add many more elements to be drawn it would get very messy. In my second example I tried to put everything into an array
FabricJS: Vertical Align text center
I am using fabricjs 1.5 and I am stuck on aligning the text in the middle of the line vertically. I am using this code to set the line height It changes the line height of text on canvas but text always remains at the top. I want it to be in the vertically middle. Please help. Answer You need
How to get random point near edges of a square in javascript
I want to make a function that gives me a random point near the edges of a rectangle from a point. This is what I came up with so far, but I have absolutely no idea why it is not working. Just to clarify, the black region in this ‘Not to scale’ diagram is where I want to allow the
Collision in canvas javascript game
I added collision to my game but I have a problem. But first I´ll give you some background. I have this: On update(); function I have this: That is used here: Note: wPlayer and hPlayer are the width and height of the player, as the animation is done through a spritesheet. xPlayer and yPlayer are the positions of the Player