4

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);
Mattias
  • 2,929
  • 5
  • 29
  • 46
  • Have you tried setting `c.height` and `c.weight` to something like 120%? That'll make it bigger – Bikas Jul 10 '15 at 16:39
  • Ye i can make it bigger but not bigger than screen, i want to still have the image naturalHeight and naturalWidth drawn to a canvas or something and held without having to show it so that it doesnt get downscaled or cropped which happens now – Mattias Jul 10 '15 at 16:49
  • Why do you want to draw the image to a canvas when you don't want to put it on the screen? – Frank Bryce Jul 10 '15 at 16:56

1 Answers1

3

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");
Vale
  • 1,912
  • 16
  • 22
  • Accepting because this one and http://stackoverflow.com/questions/934012/get-image-data-in-javascript together put me on the right path for solving this – Mattias Jul 11 '15 at 12:38