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.

adjusting canvas to fit screen on scroll

I have a canvas element dynamically created which overlays every other element. On resize, the canvas fits to the screen perfectly without any trouble.
I figured that the same principle would work with scrolling, but it does not:
var a = document.createElement('canvas');
createCanvas();
function createCanvas(){
a.height = $(window).height();
a.width = $(window).width();
a.id = "some_canvas";
a.style.opacity = "0.8";
a.style.position = "absolute";
document.body.insertBefore(a,document.body.firstChild);
context = a.getContext("2d");
context.fillStyle = "#000000";
context.fillRect(0, 0, a.width, a.height);
}
$(window).resize(function(){
$("some_canvas").remove();
createCanvas();
});
$(window).scroll(function(){
$("#some_canvas").remove();
createCanvas();
});
https://jsfiddle.net/9mfxytoz/1/
the canvas remains at it's last size adjustment, but does not follow through with scrolling. I'm trying to make it so that the canvas can always be seen, even when scrolling.

Try this:
<canvas id="Canvas2D"></canvas>
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#Canvas2D {
position:absolute;
top:0;
left:0;
}
And here is the JS required to make it all work:
// set the width and height to the full windows size
var SCREEN_WIDTH = window.innerWidth;
// Change to scroll height to make it the size of the document
var SCREEN_HEIGHT = document.documentElement.scrollHeight;
// Make sure to set the canvas to the screen height and width.
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
// everytime we resize change the height and width to the window size, and reset the
// center point
window.onresize = function () {
SCREEN_HEIGHT = canvas.height = document.documentElement.scrollHeight;
SCREEN_WIDTH = canvas.width = document.body.offsetWidth;
HALF_WIDTH = SCREEN_WIDTH / 2;
HALF_HEIGHT = SCREEN_HEIGHT / 2;
};

Increase drawing canvas?

I have this code here: http://jsfiddle.net/m1erickson/98Bgq/
And I need to Increase drawing canvas for 550px of width and 400px height, and something tells me that this line:
var arcCount = colors.length;
var arcAngle = Math.PI * 2 / arcCount;
var cx = 150;
var cy = 150;
var radius = 75;
var lineWidth = 25;
And I don't know how to do that, someone can help me?

Just get the canvas DOM element and change its width and height properties.
var canvas = document.getElementById('canvas');
canvas.width = 550;
canvas.height = 400;

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");