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.
Related
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>
I made a game drawn on a canvas. The canvas background is blue. The draw function from processingJS is just drawing a light-blue background over the canvas.
The canvas takes up the whole window. That part is ok.
The canvas resizes to fit the window and I can see in the console that the window event listerner is working fine.
Ideally, I should see only light-blue. But I do not.
No matter what size the window, the screen is initially light-blue. If I resize to make it smaller, the window stays light-blue. If I make the window bigger than it was originally (when I refreshed the page), the remaining area of the window that is greater than the original size of the canvas is blue, instead of light-blue (meaning that the canvas is resizing, but the draw function is not drawing over all of it like I want).
Here is the css and html:
<!DOCTYPE html>
<html>
<head>
<style>
body, canvas, html {
margin:0;
padding:0;
border:0 none;
}
canvas {
display: block;
background: rgb(100, 100, 255);
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
Here is the javacript code in a script tag.
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script>
var canvas = document.getElementById("myCanvas");
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
window.addEventListener("resize", canvasResize);
function canvasResize() {
console.log("resize");
canvasWidth = window.innerWidth;
canvasHeight = window.innerHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
};
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(canvasWidth, canvasHeight);
frameRate(30);
//ProgramCodeGoesBelow
draw = function() {
background(235, 245, 255);
};
//ProgramCodeGoesAbove
}};
var canvas = document.getElementById("myCanvas");
var processingInstance = new Processing(myCanvas, sketchProc);
</script>
</html>
Your problem is because even though you're resizing the canvas, Processing.js doesn't really know that you've resized the canvas. So it keeps using the original width and height values it calculated at the beginning of your program.
You can confirm this by adding this line to your draw() function:
text(width + " x " + height, 20, 20);
Those width and height variables are internal to your Processing sketch, and they don't change when you resize the canvas. After some tinkering, one solution that seems to work is to set those internal variables when you resize the canvas, like this:
function canvasResize() {
console.log("resize");
processingInstance.width = window.innerWidth;
processingInstance.height = window.innerHeight;
canvas.width = processingInstance.width;
canvas.height = processingInstance.height;
};
Honestly that feels a little hackish so I wouldn't be surprised if you encounter other weird behaviors, but it seems to work for your example. Also note that you're using instance mode, so the code would look slightly different for a non-instance mode sketch.
Also note that Processing.js does give you access to the window size in the screenWidth and screenHeight variables, so you could change your size() function to this:
size(screenWidth, screenHeight);
That's not directly related to your problem, but it might save you a couple lines of code.
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();
};
I'm trying to do a responsive canvas. All my tests has been doing with a 600x600 canvas and with that height and width it works OK and paint every line correctly. The problem is that I have tried this:
#myCanvas {
background-color: #ffffff;
border:1px solid #000000;
min-height: 600px;
height: 100%;
width: 100%;
}
Just for the record, myCanvas is inside a sm-col-8.
And it looks nice on my laptop and looks nice on my phone but (because of my draw() function, because it was thinking for a square) the draw starts more like in the down-left corner (nearby) and it should start at up-right corner.
So, I don't want to change my draw() function but what I'm looking for is to reescale the canvas size. I mean: If I'm in a laptop/tablet.. with 600x600, show it at that size, but if I'm on my phone which has 384x640 show it like 300x300? I don't know if it could be a good solution.
My draw function:
function drawLines(lines,i,table,xtotal,ytotal){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var xIni;
var xFin;
var yIni;
var yFin;
xIni = (c.width*parseInt(lines[i][1])/xtotal);
yIni = (c.height*parseInt(lines[i][2])/ytotal);
xFin = (c.width*parseInt(lines[i][3])/xtotal);
yFin = (c.height*parseInt(lines[i][4])/ytotal);
ctx.beginPath();
ctx.moveTo(xIni,c.height-yIni);
ctx.lineTo(xFin,c.height-yFin);
ctx.lineWidth=4;
ctx.strokeStyle = colorAleatorio();
ctx.stroke();
}
With Bootstrap, use:
<canvas id="canvas" class='img-responsive' style="border: 1px solid black;"></canvas>
You can make your html Canvas responsive by using the context.scale command.
The .scale command will scale the internal coordinates system used by canvas.
This means you do not need to change any of your own drawing coordinates because canvas will automatically transform your coordinates into scaled canvas coordinates for you.
// save the original width,height used in drawLines()
var origWidth=600;
var origHeight=600;
var scale=1.00;
// reference to canvas and context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// call this after resizing
// send in the new maximum width,height desired
function resizeAndRedraw(newMaxWidth,newMaxHeight){
// calc the global scaling factor that fits into the new size
// and also maintains the original aspect ratio
scale=Math.min((newMaxWidth/origWidth),(newMaxHeight/origHeight))
// resize the canvas while maintaining correct aspect ratio
canvas.width=origWidth*scale;
canvas.height=origHeight*scale;
// Note: changing the canvas element's width or height will
// erase the canvas so you must reissue all your drawing commands
drawLines(lines,i,table,xtotal,ytotal);
}
// call drawLines
function drawLines(lines,i,table,xtotal,ytotal){
// scale the canvas coordinate system to the current scale
// Note: This scales the coordinates used internally
// by canvas. It does not resize the canvas element
ctx.scale(s,s);
// now do your drawing commands
// You do not need to adjust your drawing coordinates because
// the Canvas will do that for you
var xIni;
var xFin;
var yIni;
var yFin;
xIni = (c.width*parseInt(lines[i][1])/xtotal);
yIni = (c.height*parseInt(lines[i][2])/ytotal);
xFin = (c.width*parseInt(lines[i][3])/xtotal);
yFin = (c.height*parseInt(lines[i][4])/ytotal);
ctx.beginPath();
ctx.moveTo(xIni,c.height-yIni);
ctx.lineTo(xFin,c.height-yFin);
ctx.lineWidth=4;
ctx.strokeStyle = colorAleatorio();
ctx.stroke();
// restore the context to it's unscaled state
ctx.scale(-s,-s);
}
I have seen some similar questions here but not actually what I need to know!
I am using Flash CS6 and outputting a CreateJS framework animation instead of regular .swf files. When you publish from within the API (Flash) it generates an html5 doc and an external .js file with the actual javascript that defines the animation.
Here's what I need: I want my animation to either be able to go full screen and maintain it's aspect ratio -OR- be set at say 1024x768 and be centered in the browser window but if viewed on a mobile device, dynamically resize to fit the device screen size or viewport size and centered.
A perfect example of what I need is here: http://gopherwoodstudios.com/sandtrap/ but I don't see which code is doing the dynamic resizing in this example.
Any help would be greatly appreciated. In addition, I am supplying the html5/js output of the Flash API since it seems to be very, very different than the example code given in other canvas-related posts.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from index</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="index.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Mesh.png", id:"Mesh"},
{src:"images/Path_0.png", id:"Path_0"}
];
var loader = new createjs.PreloadJS(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
if (o.type == "image") { images[o.id] = o.result; }
}
function handleComplete() {
exportRoot = new lib.index();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
</script>
<style type="text/css">
body {text-align:center;}
#container { display:block;}
</style>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<div id="container">
<canvas id="canvas" width="1024" height="768" style="background-color:#ffffff; margin: 20px auto 0px auto;"></canvas>
</div>
</body>
</html>
Thanks again!
don't know if you worked this one out in the end, but I recently had the same issue - I just needed to resize the whole createJs object to the viewport.
I added a listener to viewport resizing (I used jQuery), then resized the canvas stage to match the viewport, then using the height of the original flash stage height, or width depending on what you want (mine was 500), you can scale up the createJs movie object (exportRoot).
(function($){
$(window).resize(function(){
windowResize();
});
})(jQuery);
function windowResize(){
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;
var test = (window.innerHeight/500)*1;
exportRoot.scaleX = exportRoot.scaleY = test;
}
Hope that helps someone!
function resizeGame()
{
widthToHeight = 600 / 350;
newWidth = window.innerWidth;
newHeight = window.innerHeight;
newWidthToHeight = newWidth / newHeight;
if (newWidthToHeight > widthToHeight)
{
newWidth = newHeight * widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
} else
{
newHeight = newWidth / widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
}
scale = newWidthToHeight / widthToHeight;
stage.width = newWidth;
stage.height = newHeight;
gameArea.style.marginTop = ((window.innerHeight - newHeight) / 2) + 'px';
gameArea.style.marginLeft = ((window.innerWidth - newWidth) / 2) + 'px';
}
widthToHeight is your game canvas scaling ratio. gameArea is your div id
make it sure your html tag must contain
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
The inline width and the height of the canvas define "resolution" - setting a CSS style of width defines "scale". Think of it like canvas size and image size in photoshop.
Because width and height of elements isn't defined when you export, I'm struggling to come up with a good way to scale up. But, you can always scale down. Use CSS to set the max-width and max-height to be 1024x768 (or whatever your original is) and then set the regular width and height to be whatever you need (proportionately).
Then just use CSS to center - margin:auto and all that.
I find it useful to allow my canvas to be fluid based on width, and then adjust the height based on the aspect ratio on resize. There are a couple things to keep in mind.
You must assign a width & height attribute to the canvas element whether you're creating with javascript or with html
You have to adjust the object's style.height property, not the canvas height property directly.
If you follow this sort of example you can even use media queries to give even more flexibility. jsFiddle, if you please.
var el = document.getElementById('mycanvas');
var aspectRatio = el.height / el.width;
resizeCanv = function resize (){
var style = getComputedStyle(el);
var w = parseInt(style.width);
el.style.height = (w * this._aspectRatio) + 'px';
};
// TODO: add some logic to only apply to IE
window.addEventListener('resize', resizeCanv);
EDIT: I haven't tested this with any interactivity within the canvas, only layout and animations.