This question already has answers here:
Print canvas contents
(5 answers)
Closed 7 years ago.
I'm printing canvas which is in iFrame. When I print it resolution show too bad.
I think I should make the canvas more larger and scale it to normal size..
HTML :
<iframe width="80px" height="80px" id="printframe">
JS :
var frame = document.getElementById("printframe");
var frame_canvas = frame.contentWindow.document;
frame_canvas.body.innerHTML = '<canvas id="myCanvas" width="980px" style="border: 1px solid black;"></canvas>';
var canvas = frame_canvas.getElementById("myCanvas");
canvas.getContext("2d").scale(0.5, 0.5); // should it be make the
canvas smaller? its not working
var context = canvas.getContext("2d");
context.font = "50px"; // normal size is 10px
context.fillText("This is text to print !!!");
frame.contentWindow.print(); // it prints but resolution is too bad
Is there any way to scale it, or make canvas resolution more better ?
Help me and Thank you ..
A canvas actually has two sizes: the size of the element itself and the size of the element’s drawing surface. Setting the element's width and height attributes sets both of these sizes; CSS attributes affect only the element’s size and not the drawing surface.
One work around is to set the Canvas' Height and Weight through JavaScript like below:
var canvas = frame_canvas.getElementById("myCanvas");
canvas.width = 300;
canvas.height = 300;
If this does not work you can try scaling the canvas like shown below:
context.scale(2,2);
Related
I am testing the HTML <canvas></canvas> tags to create a vanilla JavaScript game for Games4Change inside my website.
As I was testing the width and height of the canvas with a ctx.fillRect(955, 0, 5, 5);, I was wondering how I could detect JavaScript shapes using console.log();, as their stroke/border overflows or goes out of the bounds of the HTML <canvas></canvas> border.
Furthermore, I am wondering how I could make JavaScript detect images and their borders overflowing through the HTML <canvas></canvas> border using console.log(); since I will be switching to images for my game instead of shapes.
Also, how do you make Javascript detect if the mouse cursor is out of the HTML <canvas></canvas> border using console.log();?
HTML
<canvas class="center" id="gameCanvas"></canvas>
CSS
#gameCanvas {
width: 960px;
height: 480px;
border: 5px solid rgba(52,52,52,1.00);/**
background-color: rgba(241,213,179,1.00);**/
}
Vanilla JavaScript
//Gets the html canvas that displays the game and allows art/rendering of the game in 2 dimensional plane.
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");
// Determine the size the canvas is being displayed
var width = canvas.clientWidth;
var height = canvas.clientHeight;
console.log(canvas.clientWidth);
console.log(canvas.clientHeight);
//Clears all content everytime the game is reloaded by frame of the rectangular screen.
ctx.clearRect(0, 0, 960, 480);
ctx.fillStyle = "#FF0000";
ctx.fillRect(955, 0, 5, 5);
after declaring canvas:
canvas.addEventListener("mouseout", console.log("mouse out"), false);
is all you need to know the mouse was over the canvas and then left.
for defining objects inside your canvas element it is a little more tricky, but essentially you need something that is keeping track of that object's width and height location (like x and y coordinates). then, you can check if that location is outside your hard-defined canvas size, for example:
if ((location.x < 0 || location.x > 960) || (location.y < 0 || location.y > 480)) {
console.log("i am outside");
}
instead of 0 and 960, of course, you can make that area smaller to account for the size of the object, so instead it logs "i am outside" when even an edge or corner exits the canvas.
i would suggest checking out something like vector.js to start defining location and movement for game objects.
I am working on a multiple web game using JavaScript. My canvas is currently set to the width and the height of my screen.
html
<canvas id = "canvas"></canvas>
javascript
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
//Making canvas scale;
c.width = window.innerWidth;
c.height = window.innerHeight;
function resize(){
//Add some code
}
My problem is, I do not want my players to zoom out, well not by default. It will make the game look bad and give the players an edge over everyone else. So I need to add some code to go into the resize method, that regardless of scale, the canvas will not be zoomed out. If the end result is something blurry at 300%+ that is fine.
IMPORTANT: the resize function cannot remove or reset the canvas back to default.
There are various ways to scale a canvas.
First off, there are 2 main parameters for the canvas size:
-Canvas Pixel Count. Set via canvas.width = 1000
-Canvas Display Pixel Size. Set via canvas.style.width = '1000px'
If you want all players to see a 1000x1000 region but displaying it fullscreen:
canvas.width = 1000;
canvas.height = 1000;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
There is also another option with canvas.style.transform = 'scale(2,2)'.
This method is the closest thing to the browser zoom done via Ctrl+ or Ctrl-.
The big advantage of transform is that the scaling is applied to all DOM children elements. If your game is using HTML for its interface, then this is the way to go. (By applying the scaling on the div containing the canvas + HTML interface.
I'm sort of new to javascript and Ive been looking up documentElement, clientWidth & clientHeight and trying to figure out why its setting my canvas to the size of 300px by 150px. Maybe I'm not understanding something on how it's getting those dimensions. Can someone help explain?
Here is my current code
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementByID('canvas');
var ctx = canvas.getContext('2d');
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
</script>
The "height" and "width" properties of the canvas object control the size of the canvas coordinate system, not the size of the element on the screen. If you don't impose some CSS rules for that, you get the default on-screen size.
Looks like its a default canvas size issue. See this post with a similiar issue. I assume you're in Chrome? canvas default size
The issue is a typo in the code, so the code never runs.
change
var canvas = document.getElementByID('canvas');
to
var canvas = document.getElementById('canvas');
notice the lowercase d
What I'd like to do is create a 15 by 15 pixel sized canvas with jQuery and I am looking for an elegant way to do it.
I currently create a canvas with jQuery like this:
var canvasNode = $('<canvas />', {
style:'display:block',
width:15,
});
// canvasNode[0].width=15;
canvasNode[0].height=15;
An oddity is that the width:15 in that has no effect while the currently commented out line below does what I'd like to do. I also tried style:'display:block;width:15px;' but while that displays the canvas at 15px width the canvas itself stays at its large default size so its just being scaled so that's not what I seek.
In case you are really worried about performance, this is the fastest way (untested, but I'm sure it is):
var canvas = document.createElement("canvas");
canvas.width = 15;
canvas.height = 15;
That is, no jQuery at all.
Note that sending in an object with a width property will set the css width to 15px (basically just scaling the canvas), the canvas will still be created with the default number of pixels in width if no width attribute is specified, which is usually 300 pixels.
Just set the width and height attributes:
$('<canvas />', {
style:'display:block'
}).attr('width', 15).attr('height', 15);
This question already has answers here:
make canvas as wide and as high as parent
(3 answers)
Closed 4 years ago.
Currently I have an HTML5 canvas that is a fixed size, something like this:
<div class="container">
<canvas id="example" width="350" height="250"></canvas>
</div>
However I want to be able to scale the canvas so that it is the same size as the container around it, obviously it still has to keep the same aspect ratio. I also want it to be fluid so that if a user resizes the browser then the canvas will scale with the fluid container.
So for example if my container was set to a width of 500px then the width of the canvas would scale to the same size. Eg:
<div class="container" style="width:500px;">
<canvas id="example"></canvas>
</div>
For example the canvas would get a width of 500px to match the container and the height would automatically be set to 357px which keeps the same aspect ratio.
I believe this could be achieved with some javascript, I just do not know how to do it ...
I hope I have provided enough info for someone to help me. Would appreciate it if someone could whip up a jsfiddle and provide some example code of it working if possible.
Thanks.
Here's a basic implementation that maintains aspect ratio: http://jsfiddle.net/wtVX2/1/
function resizeCanvas(){
var con = document.getElementById("container"),
canvas = document.getElementById("canvas"),
aspect = canvas.height/canvas.width,
width = con.offsetWidth,
height = con.offsetHeight;
canvas.width = width;
canvas.height = Math.round(width * aspect);
}
Note it is only fluid horizontally.
The jQuery would be:
function resizeCanvas(){
var con = $("#container"),
canvas = $("#canvas")[0],
aspect = canvas.height/canvas.width,
width = con.width(),
height = con.height();
canvas.width = width;
canvas.height = Math.round(width * aspect);
}
Note that I'm still setting the width and height of canvas the same way. If we set the width/height with CSS, it will stretch/squash the drawing of the pixels, and you'll get fuzzy drawings.