I have a p5.js canvas on my website, contained within a canvasDiv class, and I have a script that goes to the website and clicks the canvas, which downloads it etc. How do I scale down the canvas so that it doesn't take up most of the screen, while still keeping the 1000x1000px resolution? Thanks and have a good day!
HTML
<div id="canvasDiv">
<script src="sketch.js" id="astrum"></script>
<script src="functions.js"></script>
<script src="shapes.js"></script>
</div>
CSS
#canvasDiv {
display: block;
width: 1000px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
font-family: 'Source Code Pro', monospace;
}
JS
function setup() {
const myCanvas = createCanvas(1000, 1000);
myCanvas.parent('canvasDiv');
background(40);
angleMode(DEGREES);
rectMode(CENTER);
noStroke();
}
function mousePressed(){
if(mouseX > 0 && mouseX < width){
if(mouseY > 0 && mouseY < height){
save("AM.png");
}
}
}
Use create graphics and draw to the graphics buffer with image() on the canvas.
when you want someone to download make the download from the graphics buffer and not from the canvas.
saveCanvas(selectedCanvas, [filename], [extension])
You could also have a hidden canvas behind, i think css has a property:
#real-Canvas {
hidden: true
}
Afterwards you could have the image or whatever you have scaled down on the first canvas that users see, as like a preview type thing, you could also do this with createGraphics i guess.
this is basically the same answer as DavidWeiss'.
Related
I'm using a full screen canvas as background of the first section of my page. But as soon as I add the second section and vertical scrollbar appears, the height of canvas reduces a little bit and a gap appears. here's my code:
P.S: Sorry, my code contained bugs, I fixed them. now you can see the red gap.
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
scaleCanvas()
window.addEventListener("resize", scaleCanvas)
function scaleCanvas() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
c.fillStyle = 'black'
c.fillRect(0, 0, canvas.width, canvas.height)
}
* {
box-sizing: border-box;
max-width: 100%;
}
body {
margin: 0;
padding: 0;
}
#first-section {
position: relative;
min-height: 100vh;
background-color: red; /* to see the gap */
}
#content {
position: relative;
z-index: 2;
}
#second-section {
min-height: 100vh;
background-color: blue;
}
#canvas {
display: block;
padding: 0;
margin: 0;
border: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div id="first-section">
<canvas id="canvas"></canvas>
<div id="content">content</div>
</div>
<div id="second-section"></div>
Assuming you mean full screen, and not full page. The two are very different.
If you mean full page then the link to the Screen API will also give you details on obtaining the page size.
Size full screen canvas.
The problem is that you have content that extends outside the page width and height (innerWidth, innerHeight)
The elements with ids first-section, content, and second-section must be inside the display area or else you will get a scroll bar. The scroll bar will change the innerWidth, innerHeight values subtracting the scrollbar width or height depending on which is visible.
To prevent scroll bars the best option is to keep all content inside innerWidth, and innerHeight
Full screen with scroll bars.
If you want have the scroll bars and you are using full screen you can use the Screen API to get the width and height of the display in pixels. You can set the canvas size to match the screen without the scroll bars effecting its size.
Note Do read the provided link to Screen as what defines the screen may not be as expected. EG more than one monitor, or device orientation will effect how you use the API.
Basic example
Thus when in full-screen mode you can set the canvas size and ignore scroll bars with
function sizeFullScreenCanvas() {
canvas.width = screen.width;
canvas.height= screen.height;
}
I am currently trying to make a pictionary application in HTML/CSS/PHP and after making the application I am trying to make it mobile friendly/responsive.
The way I am displaying the canvas that is being drawn on on the other players' screen is this:
javascript
let canvas = document.querySelector("canvas");
let base64dotpng = canvas.toDataURL();
ws.send("canvas:" + base64dotpng);
Which I am sending over a websocket. This works perfectly fine and when I read the data back in like this:
let ctx = document.querySelector("canvas").getContext('2d');
let canvasImage = new Image();
canvasImage.src = msg;
if (newRound) {
ctx.clearRect(0, 0, window.innerWidth * 0.525, window.innerHeight * 0.90);
}
ctx.drawImage(canvasImage, 0, 0);
However now that I'm implementing a mobile version whenever I load in a canvas on mobile the ratio of the canvas is a bit different and it does not load the full image.
css
This is my css on general vs mobile:
general:
#drawingCanvas {
display: inline-block;
background-color: white;
border-width: 0.3vh;
border-color: black;
border-style: solid;
position: absolute;
height: 90vh;
top: 5vh;
left: 20vw;
width: 52.5vw;
}
mobile:
canvas#drawingCanvas {
z-index: 1;
top: 0;
margin-left: -20%;
display: inline-block;
width: 52.5%;
height: 99%;
}
If the canvas was to be stretched on mobile that would be fine, but right now this is the difference:
how it is being drawn on a computer browser
vs
how it is getting displayed on mobile
(the phone is in landscape mode)
So the canvas appears to be loading in at full size
Thanks in advance,
Aap.
I have found an answer in the .drawImage method of context.
The 4th and 5th parameters can be used to rescale the canvas like so:
if (isMobile){
ctx.drawImage(canvasImage, 0,0,canvasImage.width*(window.innerWidth / (canvasImage.width/0.525)),canvasImage.height*(window.innerHeight/(canvasImage.height/0.9)));
} else {
ctx.drawImage(canvasImage, 0, 0);
}
Basically, I'm trying to create a game in which circles will spawn on a canvas and the user has to click them as fast as possible. The circles should spawn randomly on the canvas and have a certain radius. Once the user clicks a circle, they are awarded points based on the time it took them to click the circle (less time = more points). After the user clicks the circle, it disappears, and another circle randomly spawns somewhere on the canvas, and the user keeps doing this until 100 circles are clicked overall.
The whole point of this game is to help improve accuracy and reflex for FPS games. I decided I would create a game like this to help myself mainly, and for anyone else because I couldn't find a game like this online that fit my needs.
Anyway, here's the code for the game I have so far. If anyone could help me in the direction of further developing this game or even completing it, it would be much appreciated.
HTML:
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
function spawnTarget() {
}
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(0, 0, 255);
text-align: center;
}
#header {
display: inline-block;
background-color: rgb(255, 255, 255);
margin: 64px auto;
border-radius: 16px;
}
h1 {
font-family: Arial;
font-size: 128px;
color: rgb(0, 0, 0);
}
#myCanvas {
width: 1800px;
height: 900px;
border: 4px solid rgb(0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<title>Aim Practice</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>Aim Practice</h1>
</div>
<div id="container">
<canvas id="myCanvas">
</canvas>
</div>
</body>
</html>
because the circles won't be actual DOM elements, you will have to listen for click events on the canvas, and compare the screenX and screenY on the click event to the canvas coordinates of he circle in question. Remember to add in the offset of the canvas relative to the screen. You will also have to manually calculate whether the click is inside the circle or not.
I was trying to put a canvas in a container. I wanted the canvas to have the same size as the container. To do this I used JQuery, however, this turned out to scale my canvas. This was not my intention, especially because I draw after resizing. Doing seemingly the same thing in good old fashion JavaScript gives me the expected result.
I personally did not expect the JQuery result and it took some time before I figured out the problem. Does anybody know why they opted for this implementation and why it gives a different result? I hope by sharing this I can save some people a lot of time!
Thanks for anybody willing to research this further of fix this!
Here is some example code:
<html>
<head>
<title>Canvas resizing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
#container1{
background-color: green;
width: 100px;
height: 100px;
margin: 50px auto;
}
#container2{
background-color: red;
width: 100px;
height: 100px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="container1">
<canvas></canvas>
</div>
<div id="container2">
<canvas></canvas>
</div>
<script type="text/javascript">
function draw (canvas) {
var context=canvas.getContext("2d");
context.lineWidth = 5;
context.rect(25,25,50,50);
context.stroke();
}
$(document).ready(function () {
//javascript
var container = document.getElementById('container1');
var canvas = container.childNodes[1];
canvas.width = 100;
canvas.height = 100;
draw(canvas);
//jquery
var container = $('#container2');
var canvas = container.children()[0];
$(canvas).width(100);
$(canvas).height(100);
draw(canvas);
});
</script>
</body>
</html>
The jQuery width and height methods are shorthand aliases for setting the CSS width and height properties. Sizing a canvas using CSS causes the scaled, distorted look you're seeing. Your pure javascript version of the code is setting the width and height attributes of the canvas element. To achieve the same in jQuery you can use:
$(canvas).prop('width', 100)
$(canvas).prop('height', 100)
JSFiddle
I have a problem to get my window size, I try this code:
Javascript
var game;
function game() {
this.canvas = document.getElementById('canvas');
this.canvasWidth = window.innerWidth;
this.canvasHeight = window.innerHeight;
this.initCanvas = function() {
this.canvas.style.width = this.canvasWidth + "px";
this.canvas.style.height = this.canvasHeight + "px";
}
this.run = function() {
this.initCanvas();
}
}
game = new game();
game.run();
I also have
CSS
html, body {
padding: 0;
margin: 0;
}
I only have a canvas in my body.
Problem is, that I have a vertical and horizontal scroll bar. This means the size of canvas is too large. How to make it of the window size without the scroll bars appearing?
It looks like you're just trying to make your canvas have a width and height of 100%. You can do this with just css:
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
canvas {
background: #ffcccc;
height: 100%;
width: 100%;
display: block;
}
Demo
Or if you want to use your code but get rid of the scroll bars on the window, you need to specify block on the canvas tag.
CSS
canvas {
display: block;
}
Demo
When you use CSS to style your <canvas> element it will get scaled instead of sized. Be sure to set the .width and .height properties on the canvas element instead (ie canvas.width not canvas.style.width).
jsfiddle example
In the example the first canvas element is scaled correctly, the second (using CSS) is not scaled properly. This has to do with a default canvas element size (300x150) that CSS scales.
To prevent getting scrollbars when setting the <canvas> to the full window width/height set the body to overflow:hidden; as used in the jsfiddle above.