This can be accomplished with Fabric using the clipTo property, but you have to ‘reverse’ the transformations (scale and rotation), in the clipTo function. When you use the clipTo property in Fabric, the scaling and rotation are applied after the clipping, which means that the clipping is scaled and rotated with the image. You have … Read more
canvas = document.createElement(‘canvas’); canvasContext = canvas.getContext(‘2d’); canvasContext.translate(width, 0); canvasContext.scale(-1, 1); canvasContext.drawImage(image, 0, 0); Here’s a snippet from a sprite object being used for testing and it produces the results you seem to expect. Here’s another site with more details. http://andrew.hedges.name/widgets/dev/
For security reasons, you can’t set the value of a file-input element directly. If you want to use a file-input element: Create an image from the canvas (as you’ve done). Display that image on a new page. Have the user right-click-save-as to their local drive. Then they can use your file-input element to upload that … Read more
A way to avoid the main HTML to be affected is to create an off-screen canvas that is kept out of the DOM-tree. This will provide a bitmap buffer and native compiled code to encode the image data. It is straight forward to do: function imageToDataUri(img, width, height) { // create an off-screen canvas var … Read more
Question 1 (first half): what’s the real reason (is the GPU acceleration related in anyway?) No, GPU acceleration has nothing to do with it. The broadest reason is privacy. To draw your svg with drawImage you have to load your svg as an external document inside an <img> tag. SVG can be quite a complex … Read more
I know this has been answered at least 5 other times on SO but … What Kaiido mentioned will work but the real issue is that canvas, when used with WebGL, by default has 2 buffers. The buffer you are drawing to and the buffer being displayed. When you start drawing into a WebGL canvas, … Read more
A Demo drawing a complex path using uniformly spaced points: http://jsfiddle.net/m1erickson/2fodu9pa/ An overview of Uniform Speed “Speed” is defined as distance per unit of time. “Uniform Speed” is therefore traveling a consistent specified distance per unit of time. So, moving along your path at 2 pixels per 1/60th second would be an example of moving … Read more
You need to redraw the scene when you resize. setting the width or height of a canvas, even if you are setting it to the same value as before, not only clears the canvas but resets the entire canvas context. Any set properties (fillStyle, lineWidth, the clipping region, etc) will also be reset. If you … Read more
Someone posted an answer, that showed a workaround for this. The idea is to set height and width to 0 before deleting the canvases. It is not really a proper solution, but it will work in my cache system. I add a small example that creates canvases until an exception is thrown, then empties the … Read more
You don’t need to iterate pixel buffer to create a pixelating effect. Simply turn off image smoothing and enlarge a small version of the image to the canvas. This will also mean you can use any image as source (CORS-wise). Example: Fiddle demo // get a block size (see demo for this approach) var size … Read more