How to make Canvas wait for image to load - javascript

I am loading an image through my REST API to my frontend. Now I want to mark specific areas on the image with the help of coordinates. The only idea I have had is to draw the image on a canvas and draw the marked areas on a higher level canvas. Every time I load the picture it gets drawn on the canvas with a different smaller size. I presume it has something to do with the canvas drawing before the image is fully loaded, but I havent figured out yet how to get it to work.
let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let canover = document.getElementById('cover');
let ctxover = canvas.getContext('2d');
let img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
ctxover.fillRect(0,0,10,10);
ctxover.fillRect(0,20,10,10);
ctxover.fillRect(20,0,10,10);
ctxover.fillRect(20,20,10,10);
}
canvas.width = img.width;
canvas.height = img.height;
canover.width = img.width;
canover.height = img.height;
I've looked at the img.height and img.width and they are often wrong. So I am looking for an easy way to only start the drawing after the image has fully loaded. I've tried working with fetch to get the image and then to draw it, but I couldn't get it right.

You seem to be setting the canvas dimensions before the the onload handler has executed. Try setting the canvas dimensions to the images dimensions in the onload handler.

Related

Images Rendered to Canvas in Node Webkit are Blurry

When I try to load an image in my node webkit app with the following code:
var canvas = document.getElementById('cytoBkg');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
var map = new Image();
map.src = './maps/map.jpg';
map.onload = function() {
ctx.drawImage(map, 0, 0, map.width, map.height, 0, 0, canvas.width, canvas.height);
console.log(map.width, map.height);
}
the image that is rendered to the canvas is very blurry. After about a minute, the following error comes up in the console:
[7583:7583:0519/153517.738479:ERROR:CONSOLE(0)] "Denying load of chrome-extension://dekacdafkimiiblogellomljhcemdaab/maps/map.jpg. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.", source: chrome-devtools://devtools/bundled/inspector.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#691bdb490962d4e6ae7f25c6ab1fdd0faaf19cd0/&dockSide=undocked (0)
How can I make my image load properly? I have tried adding the image to as a web accessible resource in my package.json file, but this did not help.
This issue seems to arise when you set the height and width of the canvas in it's style attribute before drawing the image on the canvas. In the above example, the issue can be remedied by setting:
canvas.width = map.width;
canvas.height = map.height;
after the image's onload event, and removing any css related to the height or width of your canvas.

How can I load an image, draw on it (the original size) but scale it back to fit a canvas?

Currently I have this code:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'assets/img/img.png';
This load an image inside my canvas. After that I have a code which draws some graphics on the image.
Currently I have scaled the image file to be with the size of the canvas. But I would like to have it in much higher resolution like it was originally and to be able to draw on the original one. But show the final image scaled inside the canvas window. How can I achieve that?

How to show the image with reduced size in thumnails using Cordova

In my android application, I have to show the images in thumbnail view with reduced size(100 KB) instead of showing it with original size(1 MB). It helps to improve the performance of my application.
How to implement this compression functionality using Ionic/ Cordova. Could you please provide some suggestion to implement this functionality.
Try this. It should work. But instead of image tag use canvas tag. Put this code in your javascript function for loading image. It compress your image to your desired dimensions.
img = new Image();
img.src = 'example.png'; // your file
img.onload = function(){
var canvas = document.getElementById('outputImage'); // id of your canvas
var ctx = canvas.getContext('2d');
canvas.width=400 // your dimensions
canvas.height=300
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

Is it possible to draw a canvas thats bigger than the current screen?

I'm drawing a image to a canvas, and when doing so the image gets downscaled to the canvas(which makes it lose quality) even though the image is the same size as the canvas, thats because the img does a good job scaling down the actual img that in reality has a bigger naturalheight and naturalwidth. I know there is possible ways to make this quality better, however i have no need of actually showing this canvas to the user/no need of downscaling. Therefore am i wondering if there is any way to drawImage that is bigger than the screen and hold it somewhere? Heard someone mention a box object or a camera object somewhere but couldn't really get use of that information only.
Question, is it possible to draw a canvas bigger than the screen? in that case how?
This is the code im working with atm
var image = document.getElementById('insertedImg');
var height = $("#insertedImg").height();
var width = $("#insertedImg").width();
var c=document.getElementById("canvass");
var ctx=c.getContext("2d");
c.height=height;
c.width=width;
ctx.drawImage(image,0,0,width,height);
Use an offscreen canvas, you just need to create a new canvas and set its height and width accordingly. Then you can append it to an element or export the image as a base64 string or whatever you need.
//canvas is not visible unless appended to a DOM element
var canvas = document.createElement('canvas');
canvas.width = $("#insertedImg").height();
canvas.height = $("#insertedImg").width();
var ctx = canvas.getContext('2d');
//do the drawing, etc.
ctx.drawImage(...);
//export the image
var img = canvas.toDataURL("image/png");

Using Canvas fillText() - HTML5, JavaScript

I have a plugin that will fill text based on an image using the following:
function draw() {
//grab font to use
var fFamily = $(".activeText a .fontType-cont").val();
ctx.font = startFontSize + 'px ' + fFamily;
ctx.fillText(text, 10, 100);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(img, 10, 20, 500, 100);
}
var canvas = document.getElementById(current),
ctx = canvas.getContext('2d'),
img = document.createElement('img');
//draw it
img.onload = draw;
img.src = $(".activeGColor").find('img').attr('src');
What happens is that the canvas will take that image, display it in the canvas and as the text gets bigger, you see it as the fill for the text. My issue is that, How can I make it so it does not look stretched or whatnot? Do I have an option to do so?
What are your ideas?
We need to see an example of whats going on here. Your question makes it sound like you have some sort of animation going on... that changes the font-size to a larger and larger size. The way things work by default, is that the text will render proportionally. However if your using any thing like ctx.scale() you obviously could throw that off. Also if your not clearing your canvas each frame, you could get more of a bleed effect, that you may be describing as stretching.

Categories

Resources