How to export Canva Render has GIF with CSS modification - javascript

I'm using p5.js to make a GIF animation but I have an issue when I want to export it.
I did a pixelased effect on my animation by adding these css properties to the Canva (140*140) :
image-rendering: pixelated;
width:500px;
height:500px;
My problem is that I can't export this Canva with the properties I added. (I'm using CCapture)
My gif is in 140x140 without the pixelated effect.
How can I get the rendering I need?

There is a difference between the width & height you can set for a HTML element e.g. <canvas width='140' height='140'> and the CSS width & height properties.
The former defines the actual size of the canvas - 140x 140in this case.
If we now set the CSS width & height to something deviating from the HTML element's width & height e.g. <canvas width='140' height='140' style='width: 500px; height:500px;'> the actual size in pixels of the canvas does not change - it stays 140 x 140 pixels. The CSS properties just control the displayed size of the element inside the browser, meaning the 140 x 140 are simply stretched to 500 x 500.
So if you get actual pixel data of the canvas - for exporting to gif/png - the final image will have the original dimensions of the canvas - not the rendered.
The fix is quite simple though. Instead of directly using the source canvas for exporting, draw it's content on a second canvas, the size of your desired resolution.
To force the 'export' canvas to not use any filtering/smoothing, you need to set the imageSmoothingEnabled property of it's context to false.
Here's an example (you can right-click and save both images to see the difference):
var ctx = document.getElementById('canvas').getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
let sourceCanvas = document.getElementById("canvas");
let virtualWidth = parseInt(getComputedStyle(sourceCanvas).width);
let virtualHeight = parseInt(getComputedStyle(sourceCanvas).height);
var canvas = document.getElementById("exportCanvas");
canvas.width = virtualWidth;
canvas.height = virtualHeight;
canvas.getContext('2d').imageSmoothingEnabled = false;
canvas.getContext('2d').drawImage(sourceCanvas, 0, 0, virtualWidth, virtualHeight);
}
image.src = 'https://mdn.mozillademos.org/files/12640/cat.png';
canvas {
width: 500px;
height: 500px;
}
<span>Rendered canvas</span><br>
<canvas id="canvas" width="140" height="140"></canvas><br>
<span>Export canvas</span><br>
<canvas id="exportCanvas"></canvas>

Related

can't position canvas over image

I'm trying to draw some stuff over loaded image. However, for some reason canvas appears below the image not on top. I'm doing it as follows:
I have the following container:
<div id="container">
<img src="{{url_for('static', filename='nature.jpg')}}" id="target" style="zIndex=1">
</div>>
And the I'm trying to add canvas as follows:
window.onload = function() {
var img = document.getElementById('target');
var width = img.naturalWidth;
var height = img.naturalHeight;
var canvas = document.createElement('canvas'); //Create a canvas element
//Set canvas width/height
canvas.style.width=width;
canvas.id = 'mycanvas';
canvas.style.height=height;
//Set canvas drawing area width/height
canvas.width = width;
canvas.height = height;
//Position canvas
canvas.style.position='absolute';
canvas.style.left=0;
canvas.style.top=0;
canvas.style.zIndex=100000;
canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas
$('#container').append(canvas);
}
However, canvas appears below the image rather than on top of it. What am I doing wrong?
thanks
You've used the wrong syntax for the inline style style="zIndex=1", it should be style="z-index: 1", still, for z-index to work its element need a position other than static
In this case, since the img has no position, you can actually drop the z-index all together, as the canvas has a position, position: absolute, and will be layered on top of the image because of that alone.
For the canvas to be positioned relative to the container, the container need a position, i.e. position: relative

How to resize the canvas using JavaScript?

How would one make the JavaScript canvas (or whatever the 400px by 400px drawing area is called) larger than 400x400?
I have a 1440p screen and when I run my JS files through an HTML file, the canvas is not surprisingly a small 400px by 400px box in the top left.
Is there anything I can do to expand the canvas to a specified height and width?
The following jsfiddle demonstrates how to resize the canvas. https://jsfiddle.net/intrinsica/msj0cwx3/
(function() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
// Event handler to resize the canvas when the document view is changed
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Redraw everything after resizing the window
drawStuff();
}
resizeCanvas();
function drawStuff() {
// Do drawing here
context.strokeRect(10,10, 230,100);
context.font = '16px serif';
context.fillText('The canvas is the blue', 30, 30);
context.fillText('background color seen here.', 30, 50);
context.fillText('It will resize if the window', 30, 70);
context.fillText('size is adjusted.', 30, 90);
}
})();
* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas {
background: #77f; /* to show the canvas bounds */
display:block; /* to remove the scrollbars */
}
<canvas id="canvas"></canvas>
Are you declaring a canvas through HTML? If you are, you can use:
<canvas id="myCanvas" width="1400" height="900"></canvas>
If you want to change the size through Javascript, you can use:
<script type="text/javascript">
document.getElementById('myCanvas').height = 800;
document.getElementById('myCanvas').width = window.innerWidth;
</script>
As the Javascript is perhaps going to ignore the CSS try to set the canvas width & height in the javascript & CSS with for example, I want my canvas to have an width of 650px and height of 750px if your id is called canvas and also add width & height in the canvas tag
canvas.width = 650px;
canvas.height = 750px;
If you're using Processing.JS for your project, I might be able to help. I'm not sure if it works on regular JavaScript. It's worth a shot though
size(screenHeight, screenWidth);
If you want to auto-detect screen size it is also possible like this
var screenSizeH = screen.height;
OR
var screenSizeW = screen.width;
You might run into problems, though. As resizing canvas is only resizing canvas, not anything inside.
A way around this is to multiply everything you have to a scale.
var scaless = screenSize/400;
You would have to multiply EVERYTHING times the scale, that is if it's a square. You will have to make 2 scales for Height and Width
The canvas element is like any standard DOM object. Therefore you can resize the canvas using standard CSS:
<canvas />
<style>
canvas {
width: 100%;
min-height: 400px;
}
</style>
https://jsfiddle.net/z3pL9qp9/
The canvas is easy to reshape; it's the content you'd need to redraw to ensure you've factored dimension changes.

Canvas auto resize height [duplicate]

I have the canvas
<canvas id="canvas" width="1700" height="679" style="background-color:#ffffff;width:100%;overflow:hidden;margin-top: -7px;"></canvas>
It work fine on chrome and firefox. However, ie can work only with width:100% but not change the height (height on 679)
I try height to be auto and 100% but getting wose
Edit: finally! I got it.
It's true that the canvas content will be not good at width 100%.
However, for the height (IE9 above is work) you have to set height style
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
And use Jquery to re-size the canvas
function resizeIE()
{
canvas = document.getElementById("canvas");
if($.browser.msie) //only IE
{
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first
if(window.innerWidth<960) //for other device (only for me)
{
var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
//to make the ratio of canvas find the pencentage
//ex. canvas height: 1700px canvas width: 679px;
//(679*100)/1700 = 39.941 <-- use this one
//best solution
}
else
{
var height_ie = window.innerHeight-160; //just for the logo for my web
}
canvas.style.height = height_ie+"px";
}
}
for re-size window apply on document.ready
window.onresize = function(event) {
resizeIE();
};
If you use CSS to resize canvas you are actually reshaping the canvas's viewport.
Think of this as scaling the image. Just like when you resize a .jpg image, you can get pixilation and distortion.
Instead resize the canvas element's size.
Think of this as adding more empty pixels to the width and height of the canvas, rather than "stretching" the existing pixels.
Here's how to add pixels to the canvas element to make it 100% of the browser window:
var canvas=getElementById("myCanvas");
canvas.width= window.innerWidth;
canvas.height=window.innerHeight;
If you are resizing your browser window, you can put this code in the windows resize handler to make it happen automatically.
Note: Whenever you resize the canvas this way, you will have to redraw the canvas contents.
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
And use Jquery to re-size the canvas
function resizeIE()
{
canvas = document.getElementById("canvas");
if($.browser.msie) //only IE
{
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first
if(window.innerWidth<960) //for other device (only for me)
{
var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
//to make the ratio of canvas find the pencentage
//ex. canvas height: 1700px canvas width: 679px;
//(679*100)/1700 = 39.941 <-- use this one
//best solution
}
else
{
var height_ie = window.innerHeight-160; //just for the logo for my web
}
canvas.style.height = height_ie+"px";
}
}
for re-size window apply on document.ready
window.onresize = function(event) {
resizeIE();
};

HTML5/ Javascript - Stretch image source

Hi I'm getting image from webcam and I save it on canvas, what I want to do is to stretch it by x and y cooridnates keeping same img dimensions, what I mean is, this is the original webcam picture:
and this is how I wanna it to be when stretched:
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas>
this is the piece of code that shows source image to <img> element in html , so I have to stretch source image before to show it in html
function snap() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
var oImg=document.createElement("img");
oImg.setAttribute('src', canvas.toDataURL());
oImg.setAttribute('alt', 'na');
oImg.setAttribute('width', '1300');
oImg.setAttribute('height', '1300');
var img = document.body.appendChild(oImg);
return img;
}
}
any idea on how to stretch the canvas.toDataUrL() source by x and y coordinates and return it stretched to the the src <img> element?
The real problem imo is how to stretch image without altering width
and height (as shown via example photos above), is this possible?
You can use the extended properties on context.drawImage that allow scaling/positioning.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
var w=img.width;
var h=img.height;
canvas.width=w; // set the canvas size to the original image size
canvas.height=h;
ctx.drawImage(img,
0,0,w,h, // start with the image at original size
-w/4,0,w*1.25,h // widen the original image by 1.25X
// and start drawing 1/4th off the left edge of the canvas
);
}
img.src="temp18.png";

correct canvas height and width not being passed to a function

Canvas element not being passed with correct height and width to a function, for now I fixed the problem by again assigning the height and width of the canvas after it has been passed to the accepting function. As I am new to this so I want to know if this is a problem with canvas or not?.
$(document).ready(function(){
calling_function = function(eventObj){
//some code
ajaxOptsFtn = {
url: '/xyz_data/',
dataType: 'json',
data: form_vals,
success: function(resp){
//initialisation for function.
if(resp.var_ready === true){
//dynamically adding canvas element.
var canvas_obj = $('<canvas/>').css({width:160, height:240});
$(clicked_element).children('canvas').remove();
$(clicked_element).append(canvas_obj);
//intilise other arguments with some values
var x = 30;
var y= http://abcs.com/dds.jpg;
var z = resp.apparel_img_url;
var nl = gamma_value;
var wD = 23;
var wU = 26;
acceptingFunction(canvas_obj[0],y,z,x,n,wU,wD);
}
else{
console.log('some other message');
}
},
};
if (data.var_ready) {
$.ajax(ajaxOptsFtn);
}
else{
console.log('some message');
};
};
acceptingFunction = function(canvas_obj,y,z,x,n,wU,wD){
canvas = canvas_obj;
console.log("canvas passed height and width:"+ canvas.height +","+canvas.width);
console.log("re assigning expected values");
canvas.width = 160;
canvas.height = 240;
var context = canvas.getContext('2d');
//some code
AimageObj.onload = function () {
//some code
};
BimageObj.onload = function () {
//some code
};
};
You must set the size of the canvas using its attributes, not CSS - for example:
var canvas_obj = $('<canvas/>').attr({'width': 160, 'height': 240});
If you don't do this the canvas element will default to size 300 x 150 pixels which is only stretched by CSS (like an image).
And likewise you also read the same attributes/properties when you want to get the canvas' size.
I have written a blog post that explains this in details - it's too long for SO but here is the essential part:
If we don’t set any actual size for the canvas’ source bitmap it will
default to 300 x 150 pixels as per specification. If you now set the
CSS size of the element to lets say 900 x 450 pixels what happens is
that those 300 x 150 pixels are simply scaled to the new size as the
CSS applies to the element while the default 300 x 150 applies to the
source bitmap (ie. the image). The applied CSS rule doesn’t do
anything with the actual bitmap size.
It would be exactly the same if the canvas was an image, which works
in a similar fashion: it has the image element and then the source
bitmap – the image itself. If you choose to use a different size for
the element than what the image is, the image is simply stretched but
its original data stays the same. There are no more or less pixels in
the original image.
It's also very easy to do it from an HTML5 standpoint. As Simple as:
<canvas id="canvasName" width="160" height="240">
<p>Sorry, The Canvas element is not supported in this browser :(</p>
</canvas>
Adding the paragraph makes it so that a browser that doesn't support the Canvas (IE6 for example) makes this line pop up instead of the Canvas. But putting this into the HTML5 file makes it simple for drawing the Canvas which can be worked with with Javascript. Just make sure you load the Canvas before you load the Javascript, otherwise it will crash
You would then have to declare it in Javascript with
var canvas = document.getElementById("mCanvas");
var context = canvas.getContext("2d");
And you can Console.log it to make sure it is connected properly

Categories