We Keep Coding

How to compress and resize canvas image with pure javascript and HTML5?

I'm trying to resize and rotate a camera picture in the client side - without any special libraries, I actually managed to do most of the work only that I get an offset of 320 pixels when rotating the image. I'm not sure where this offset is coming from and how I could fix this. Any clues? Here is my code:
function processFile(dataURL, fileType)
{
var image = new Image();
image.src = dataURL;
image.onload = function ()
{
var width = image.width;
var height = image.height;
canvas = document.createElement('canvas');
var compressionQuality = "10"; // this is % i.e. the number should run between 1 to 100, 100 is the highest quality (less compression), 1 is the highest compression (lowest quality)
var mime_type;
if(fileType==="png"){
mime_type = "image/png";
} else if(fileType==="webp") {
mime_type = "image/webp";
} else {
mime_type = "image/jpeg";
}
var cvs = document.createElement('canvas');
if (window.innerHeight > window.innerWidth)
{ //landscape picture - rotate by 90 degrees
var newWidth = height;
var newHeight = width;
cvs.width = newWidth;
cvs.height = newHeight;
var ctx = cvs.getContext("2d");
rotateDegrees=-90;
ctx.clearRect(0,0,width,height);
ctx.translate(newWidth/2,newHeight/2);
ctx.rotate(rotateDegrees*Math.PI/180);
ctx.drawImage(image,-newWidth/2-320,-newHeight/2+320); // <<<--- here I offset by 320px
}
else
{
cvs.width = width;
cvs.height = height;
var ctx = cvs.getContext("2d");
ctx.drawImage(image, 0, 0);
}
dataURL = cvs.toDataURL(mime_type, compressionQuality/100);
sendFile(dataURL);
};
When I move the image by 320px I managed to resolve this by I think that the 320px are dependent on the image size (in that case it is 1900px width)
I appreciate any help or ideas! thanks

Looks like you translate to the center of the canvas to rotate, then immediately try to draw. Your ctx origin in still in the center of the canvas, so you draw with offset.
You need to translate to the new origin before drawing.

HTML flexible canvas scale

I am making a website which will load some blueprint images on a canvas.
but the images are vary in height and width.i Would like to make the canvas scaling equal to the uploaded image scale. How do i code to make the canvas width and height changeble respective to uploaded image.
This done in html5

If I understand you correctly, you want to load images with various dimensions. According to the dimension, set the width / height of the canvas and draw the image?
In that case you could add an eventListener to the image. Once it's loaded, get the width and height. Use those to set the dimensions of the canvas. After that, draw the image on the canvas.
var image = new Image();
image.addEventListener('load', function(e) {
var width = image.width;
var height = image.height;
var canvas = document.querySelector('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
});
image.src = 'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png';
<canvas></canvas>
Fiddle

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'images/e1.jpg';
canvas.width = imageObj.naturalWidth;
canvas.height = imageObj.naturalHeight;
this also works

How do I resize the html <canvas> dynamically using Javascript?

I was wondering how I can make my canvas resize along with my browser window? As it is right now, using innerWidth and innerHeight, it will only size to the initial browser width and height. How do I make it expand with the browser?
Edit: Is there a way to do this without clearing the canvas?
JS
canvas.onmousemove = draw;
var ctx = canvas.getContext('2d');
var video = document.createElement("video");
video.setAttribute("src", "some_video.mp4");
video.autoplay = true;
var img2 = new Image;
img2.src = "some_image.png";
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
function draw(e){
var rect = canvas.getBoundingClientRect();
var x = e.clientX-rect.left-img2.width/2;
var y = e.clientY-rect.top-img2.height/2;
ctx.drawImage(video, x, y, 830, 644);
ctx.drawImage(img2, x, y, img2.width, img2.height);
}

Use it on resize
$(window).resize(function(){
// Place your code here which sets the width and height of canvas.
});

Cannot draw on canvas

I have been trying to insert a canvas on top of some pages, but for some pages it doesn't work. It seems to be me that there is something clearing all canvases on the page, but I couldn't find any calls to .clearRect anywhere in the code on the page.
canvas = document.createElement('canvas');
canvas.width = document.width;
canvas.height = document.height;
canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);
A page with the problem is: http://www.nrk.no/sognogfjordane/helse-forde-har-ikkje-full-oversikt-1.11166801
If you run the same code on this page it should work. Expected result is a huge black square on the page.
I don't understand how a script can block the use of an inserted canvas on the page.
I am using Chrome.
* EDIT *
The problem is not that I use the deprecated document.width/heightcalls, but that I wasn't aware that canvas has a maximum size: Maximum size of a <canvas> element

Because document.width and document.height are undefined, so your canvas width and height are 0 and 0.
Instead try something like:
canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);
And you'll see it just fine.
See notes on the MDN. Specifically:
Starting in Gecko 6.0, document.width is no longer supported. Instead, use document.body.clientWidth.

Please look into the demo.
canvas = document.createElement('canvas');
canvas.width = document.width;
canvas.height = document.height;
canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);
I think this is what you needed. If you need something else then please exaplin or put your code in jsfiddle. Here in this demo it is creating canvas element.

I first thought Simon Sarris was correct, but in the end that didn't do what I wanted. What I want is a that covers the entire page.
I discovered through Maximum size of a <canvas> element that I was exceeding the limits of canvas.

created a simple BREAKOUT game with jquery, attempting to convert back to plain javascript

I created breakout using some jquery and a handy tutorial online.
Here is the fiddle: http://jsfiddle.net/Kinetic915/9bLEk/6/
I successfully changed the WIDTH and HEIGHT accessing the window size like this:
From:
WIDTH = $("#canvas")[0].width = $(window).width();
HEIGHT = $("#canvas")[0].height = $(window).height();
To:
var WIDTH = document.getElementById("canvas");
var HEIGHT = document.getElementById("canvas");
WIDTH.width = window.innerWidth;
HEIGHT.height = window.innerHeight;
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
the code loads properly. I am finding a problem changing the code that renders the ball.
It works with jquery here:
Cir = $('#canvas')[0].getContext("2d");
Cir.beginPath();
Cir.arc(x, y, 10, 0, Math.PI * 2, true);
Cir.closePath();
Cir.fill();
Does not work with:
var canvas = document.getElementById("canvas");
var Cir = canvas.getContext("2d");
Cir.beginPath();
Cir.arc(x, y, 10, 0, Math.PI * 2, true);
Cir.closePath();
Cir.fill();
any suggestions?

Change it to this:
var canvas = document.getElementById("canvas");
var Cir = canvas.get(0).getContext("2d");