We Keep Coding

Javascript Canvas Not Able To Be Cleared After Transform

I'm trying to draw any amount of images onto a canvas while being able to zoom in/out using the mousewheel event, but when adjusting the canvas scale, sometimes the images overlap and the canvas doesn't clear.
Here I get the canvas, create the starting scale, image, and add the eventlistener when it is loaded:
var canvas = document.getElementById("Canvas") // Canvas
var ctx = canvas.getContext("2d") // Context
var scale = 1 // Stored Canvas Scale
var image = new Image() // Random Image
image.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png"
image.onload = () => {console.log("Running..."); canvas.addEventListener("mousewheel", MouseWheelHandler)}
Next, the reDraw() method clears the canvas and draws any number of images (between 10, or so) onto the canvas, while compensating for the positioning of the images:
function reDraw() { // Draw Image(s)
ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear Canvas
var maxX = parseInt(Math.random()*10) // Set Max Length
var maxY = parseInt(Math.random()*10) // Set Max Height
var size = 32; // Set Image Size
for (var i=0; i<maxX; i++) {
ctx.drawImage(image, canvas.width/2, canvas.height/2-(size*(maxY-i-1)), size, size)
for (var c=0; c<maxY; c++) {
ctx.drawImage(image, canvas.width/2-(size*(maxX-i-1)), canvas.height/2-(size*(maxY-i-1)), size, size)
}
}
}
Finally, the MouseWheelHandler() method gets the mousewheel data and adjusts the canvas scale accordingly:
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = e.wheelDelta || -e.detail
if (scale+(delta/Math.abs(delta*10)) >= 0.1) { // Prevent zooming out further than 10% of view
var zoom = (1+(delta/Math.abs(delta*10))) // Set the zoom
scale += (delta/Math.abs(delta*10)) // Set the scale (No less than 0.1)
ctx.transform(zoom,0,0,zoom,-(zoom-1)*canvas.width/2,-(zoom-1)*canvas.height/2)
reDraw()
}
}
My problem is that if I zoom too far out, the canvas isn't getting cleared and the images appear to kind of echo, or layer on top of one another. I've tried doing ctx.clearRect() with numbers larger and smaller than the canvas size, but it still results in overlapping images.
I just want to be able to zoom in/out and have the canvas only display what was drawn after the MouseWheelHandler runs.

FabricJs image is cropped when using scaleToHeight

I'm trying to scale an image so that it fits into the available canvas when using the scaleToHeight method the image is being cropped. So for example:
The FabricJS canvas is 1024x768, and the image resolution is 4149x2761. I cannot for the life of me figure out why the image is being cropped. Here is the code:
_currentImage = new Image();
_currentImage.src = "images/7.jpg";
_currentImage.onload = function () {
var img = new fabric.Image(_currentImage, {
selectable: false,
top: 0,
left: 0
});
//img.scaleToWidth(1024);
img.scaleToHeight(768);
//img.width = _fabricCanvas.width;
_fabricCanvas.add(img);
};
If I scale to the canvas width only, the image is not cropped, but obviously fails to fill the canvas correctly.

this is perfectly normal as you are asking for a scale factor to keep the original ratio of your image. If the destination container don't have the same ratio as the image, then the image in the container will be cropped.
as you can see in this short snippet image and canvas ratio are not the same:
console.log("canvas ratio:" + 1024/768 + " image ratio: " + 4149/2761);
use:
img.scaleX = canvasWidth / img.width
img.scaleY = canvasHeight / img.height
or
img.set({
scaleX: canvasWidth / img.width,
scaleY: canvasHeight / img.height
})
Warning you will loose the original ratio of your image.

fabricjs set clipped object as background to canvas after clipping

In my fabricjs I am making a canvas and adding an image to it and setting the image as background. and then I am clipping the cavas to some width and height.
After I clip the canvas I want a new canvas or same canvas with clipped area as background all covering the canvas with its width and height or can make new canvas with clipped area's height and width
Currently I am doing this..
function crop(url, name, left, top, width, height, callback) {
var c = document.createElement('canvas')
var id = "canvas_" + name
c.id = id
var canvas = new fabric.Canvas(id)
fabric.Image.fromURL(url, function(oImg) {
oImg.set({
selectable:false,
})
canvas.setDimensions({width:oImg.width, height:oImg.height})
canvas.add(oImg)
canvas.clipTo = function (ctx) {
ctx.rect(left, top, width, height)
console.log(ctx)
};
canvas.centerObject(oImg)
canvas.renderAll()
var img = canvas.toDataURL('image/png')
console.log(img)
callback(img)
}, {crossOrigin: "Anonymous"})
}
Here I can easyly clip the canvas with my given left, top, width and height but I am getting the same canvas with clipped clipped part and removed part with another color. But after clipping I want the clipped part to paint over canvas or set clipped part as background.
How can I do that ??

Actually you cropped the rendering of the canvas.
To save the cropped area you must use Canvas.toDataURL() method, as you can see there is parameters top, left, width, height just use the same as you put into ctx.rect(left, top, width, height) and it will returns you a string representing the cropped area (base64 encoded).
Then use this string as your canvas new background image with Canvas.setBackgrounsImage
Your code should look like:
function crop(url, name, left, top, width, height, callback) {
var c = document.createElement('canvas')
var id = "canvas_" + name
c.id = id
var canvas = new fabric.Canvas(id)
fabric.Image.fromURL(url, function(oImg) {
oImg.set({
selectable:false,
})
canvas.setDimensions({width:oImg.width, height:oImg.height})
canvas.add(oImg)
canvas.centerObject(oImg)
canvas.renderAll()
var img = canvas.toDataURL({
format: 'image/png',
left: left,
right: right,
width: width,
height: height
})
console.log(img)
canvas.setBackgroundImage(img)
callback(img)
}, {crossOrigin: "Anonymous"})
}

FabricJS toDataURL returning wrong scale?

After rendering the canvas the toDataURL returning image with canvas scale(My canvas scale is 700 x 600). How to return image with my Original Height and Width. Not canvas Width and Height. Here is the code section.
$(document).on('click','#btn-save-canvas', function(event) {
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
canvas.overlayImage.filters = [];
canvas.overlayImage.applyFilters();
canvas.renderAll();
var multi = maskOriWidth/maskWidth;
console.log(multi);
window.open(canvas.toDataURL({
format: 'png',
multiplier: 0,
}));
}
});

HTML5 - Canvas, drawImage() draws image blurry

I am trying to draw the following image to a canvas but it appears blurry despite defining the size of the canvas. As you can see below, the image is crisp and clear whereas on the canvas, it is blurry and pixelated.
and here is how it looks (the left one being the original and the right one being the drawn-on canvas and blurry.)
What am I doing wrong?
console.log('Hello world')
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32
playerImg.onload = function() {
ctx.drawImage(playerImg, 0, 0, 32, 32);
};
#canvas {
background: #ABABAB;
position: relative;
height: 352px;
width: 512px;
z-index: 1;
}
<canvas id="canvas" height="352" width="521"></canvas>

The reason this is happening is because of Anti Aliasing.
Simply set the imageSmoothingEnabled to false like so
context.imageSmoothingEnabled = false;
Here is a jsFiddle verson
jsFiddle : https://jsfiddle.net/mt8sk9cb/
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.onload = function() {
ctx.imageSmoothingEnabled = false;
ctx.drawImage(playerImg, 0, 0, 256, 256);
};

Your problem is that your css constraints of canvas{width:512}vs the canvas property width=521will make your browser resample the whole canvas.
To avoid it, remove those css declarations.
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32
playerImg.onload = function() {
ctx.drawImage(playerImg, 0, 0, 32, 32);
};
#canvas {
background: #ABABAB;
position: relative;
z-index: 1;
}
<canvas id="canvas" height="352" width="521"></canvas>
Also, if you were resampling the image (from 32x32 to some other size), #canvas' solution would have been the way to go.

As I encountered this older post for some of my issues, here's even more additional insight to blurry images to layer atop the 'imageSmoothingEnabled' solution.
This is more specifically for the use case of monitor specific rendering and only some people will have encountered this issue if they have been trying to render retina quality graphics into their canvas with disappointing results.
Essentially, high density monitors means your canvas needs to accommodate that extra density of pixels. If you do nothing, your canvas will only render enough pixel information into its context to account for a pixel ratio of 1.
So for many modern monitors who have ratios > 1, you should change your canvas context to account for that extra information but keep your canvas the normal width and height.
To do this you simply set the rendering context width and height to: target width and height * window.devicePixelRatio.
canvas.width = target width * window.devicePixelRatio;
canvas.height = target height * window.devicePixelRatio;
Then you set the style of the canvas to size the canvas in normal dimensions:
canvas.style.width = `${target width}px`;
canvas.style.height = `${target height}px`;
Last you render the image at the maximum context size the image allows. In some cases (such as images rendering svg), you can still get a better image quality by rendering the image at pixelRatio sized dimensions:
ctx.drawImage(
img, 0, 0,
img.width * window.devicePixelRatio,
img.height * window.devicePixelRatio
);
So to show off this phenomenon I made a fiddle. You will NOT see a difference in canvas quality if you are on a pixelRatio monitor close to 1.
https://jsfiddle.net/ufjm50p9/2/

In addition to #canvas answer.
context.imageSmoothingEnabled = false;
Works perfect. But in my case changing size of canvas resetting this property back to true.
window.addEventListener('resize', function(e){
context.imageSmoothingEnabled = false;
}, false)

The following code works for me:
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
};
img.src = e.target.result; // your src

Simple tip: draw with .5 in x and y position. like drawImage(, 0.5, 0.5) :D There you get crisp edges :D