If the variable persists (e.g. it’s global or part of some persistent data structure) and the data it points to is large and you want that data to be eligible for garbage collection, then you are correct to assign something small to that variable. undefined or null or “” will all work. What you’re doing … Read more
Cause Some images are just very hard to down-sample and interpolate such as this one with curves when you want to go from a large size to a small. Browsers appear to typically use bi-linear (2×2 sampling) interpolation with the canvas element rather than bi-cubic (4×4 sampling) for (likely) performance reasons. If the step is … Read more
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
SVG can do this nicely using patterns: <svg width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg”> <defs> <pattern id=”smallGrid” width=”8″ height=”8″ patternUnits=”userSpaceOnUse”> <path d=”M 8 0 L 0 0 0 8″ fill=”none” stroke=”gray” stroke-width=”0.5″/> </pattern> <pattern id=”grid” width=”80″ height=”80″ patternUnits=”userSpaceOnUse”> <rect width=”80″ height=”80″ fill=”url(#smallGrid)”/> <path d=”M 80 0 L 0 0 0 80″ fill=”none” stroke=”gray” stroke-width=”1″/> </pattern> </defs> <rect width=”100%” … Read more
Disclaimer: I’m the author of Fabric.js. I would say that Easel.js, Fabric.js, and Paper.js are among the most used at the moment. I’m judging by the number of Github watchers for each repository, volume of discussion in their Google Groups, and how often I hear about them used as canvas libraries on Twitter. These are … Read more
You can use canvas’ context.translate & context.rotate to do rotate your image Here’s a function to draw an image that is rotated by the specified degrees: function drawRotated(degrees){ context.clearRect(0,0,canvas.width,canvas.height); // save the unrotated context of the canvas so we can restore it later // the alternative is to untranslate & unrotate after drawing context.save(); // … Read more
The canvas element provides a toDataURL method which returns a data: URL that includes the base64-encoded image data in a given format. For example: var jpegUrl = canvas.toDataURL(“image/jpeg”); var pngUrl = canvas.toDataURL(); // PNG is the default Although the return value is not just the base64 encoded binary data, it’s a simple matter to trim … Read more
The canvas element runs independent from the device or monitor’s pixel ratio. On the iPad 3+, this ratio is 2. This essentially means that your 1000px width canvas would now need to fill 2000px to match it’s stated width on the iPad display. Fortunately for us, this is done automatically by the browser. On the … Read more
var canvas = <HTMLCanvasElement> document.getElementById(“mycanvas”); var ctx = canvas.getContext(“2d”); or using dynamic lookup with the any type (no typechecking): var canvas : any = document.getElementById(“mycanvas”); var ctx = canvas.getContext(“2d”); You can look at the different types in lib.d.ts.
You made the error, for the second call, to set the size of source to the size of the target. Anyway i bet that you want the same aspect ratio for the scaled image, so you need to compute it : var hRatio = canvas.width / img.width ; var vRatio = canvas.height / img.height ; … Read more