We Keep Coding

How to export Canva Render has GIF with CSS modification

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>

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.

How do I make an expandable ad with FlashCC and CreateJS?

I wonder if I make a Flash HTML5 Canvas Banner at 300x250 to start, how can I make it expand down the page and extend the canvas size?

Try this:
var originalHeight = this.stage.canvas.height;
var expandedHeight = 300; // Put here your desired height
this.stage.addEventListener("mouseover", mouseOverHandle);
function mouseOverHandle() {
this.stage.canvas.height = expandedHeight;
this.stage.addEventListener("mouseleave", mouseLeaveHandle);
this.stage.removeEventListener("mouseover", mouseOverHandle);
}
function mouseLeaveHandle() {
this.stage.canvas.height = originalHeight;
this.stage.addEventListener("mouseover", mouseOverHandle);
this.stage.removeEventListener("mouseleave", mouseLeaveHandle);
}
You will see some flickering, because the canvas redraw their content on resize. See this question for more info Flickering during resizing of HTML5 canvas

Click on the canvas then there properties tab and FPS ,Size in then change size to if you want size

Raphael.js Why my canvas size was not changed with browser window size changing?

I would like to resize the width of my raphael canvas area according to the width changing of the browser window, but my code did not work as I expected.
Following codes shows what I tried:
My index.html page:
<body>
<div class="my-canvas">
<script src="js/jquery-1.5.1.js"></script>
<script src="js/raphael.js"></script>
<script src="js/myWin.js"></script>
<script src="js/myRaphaelApp.js"></script>
</body>
my CSS defined the initial size of my-canvas:
.my-canvas {
width: 50%;
height:800;
}
I have myWin.js which can get the width of the current browser window, and listen for the browser window size changing by invoking jQuery function $(window).resize(...):
myWin.js
myWin = function(){
var width=$('.my-canvas').width()*0.5;
$(window).resize(function() {
width=$('.my-canvas').width()*0.5; //update the width as browser window size is changing
});
return {
getWidth: function(){
$(window).resize();
return width;
}
};
}();
Start to render raphael here:
myRaphaelApp.js
myRaphaelApp = function(){
var width = myWin.getWidth(); //get the width of the current browser
return {
startRender: function(){
paper = Raphael("graph", width, height); //width is not updated...
var c = paper.rect(10, 10, 50, 50);
};
}();
When I start my app in a small size browser window, the circle get drawn and the raphael canvas has the width of the initial browswer window * 0.5, then I maximize the browswer window, I was expecting that my raphael canvas width would be increasing as the browser window get maximizing, but canvas remain the same as initial size. Where am I wrong?

You're not closing your <div class="my-canvas"> tag.
You don't have a unit of measurement on your CSS height tag (e.g. px or em).
Unless your width variable is magic, you aren't updating the width of any element with your $(window).resize hook. You are merely setting the width variable to half the width of <div class="my-canvas">.

Create your paper like this:
paper = Raphael("graph", "100%", "100%");