I'm trying to simply create a canvas that has a grid with cell sizes of 20 by 20 px.
The canvas is nested within a div with scrollbars.
I've got this dot grid function for a canvas that I got from here
$(function () {
function getDocumentWidth() {
return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
};
function getDocumentHeight() {
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
};
var canvas = document.getElementById('can1');
var context = canvas.getContext('2d');
var vw = getDocumentWidth(),
vh = getDocumentHeight();
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', onResize, false);
function onResize() {
vw = getDocumentWidth();
vh = getDocumentHeight();
resizeCanvas();
}
function resizeCanvas() {
canvas.width = vw;
canvas.height = vh;
drawDots();
}
resizeCanvas();
// grid
function drawGrid() {
var cellW = 20,
cellH = 20;
// vertical lines
for (var x = 0; x <= vw; x += cellW) {
context.moveTo(x, 0); // x, y
context.lineTo(x, vh);
}
// horizontal lines
for (var y = 0; y <= vh; y += cellH) {
context.moveTo(0, y); // x, y
context.lineTo(vw, y);
}
context.strokeStyle = "#cccccc";
context.stroke();
}
// drawGrid();
// dots
function drawDots() {
var r = 1,
cw = 20,
ch = 20;
for (var x = 20; x < vw; x += cw) {
for (var y = 20; y < vh; y += ch) {
context.fillStyle = '#000000';
context.fillRect(x - r / 2, y - r / 2, r, r);
}
}
}
drawDots();
})
And here is how the canvas is placed in html:
<div class="forCanvas" >
<canvas id="can1" class="dropZone ui-widget-header" width=581 height=821 >
</canvas>
</div>
and all the css:
.dropZone {
width: 581px;
height: 821px;
padding: 0;
margin: 0;
background: #fff;
}
.forCanvas {
height: 600px;
width: 680px;
overflow: hidden;
overflow-y: scroll;
overflow-x: auto;
padding: 20px;
background: white;
border: 1px solid #d9d9d9;
border-radius: 5px;
}
The problem is that the size of these cells is not 20 by 20 and the drawing gets resized when changing the browsers dimensions.
From what I understand its a problem with view port width and height vs actual width and height? So I tried setting the width and height as such:(seen above also)
<canvas id="can1" class="dropZone ui-widget-header" width=581 height=821 >
I previously used this function with the same problem:
function drawGrid() {
var cellW = 20,
cellH = 20;
// vertical lines
for (var x = 0; x <= vw; x += cellW) {
context.moveTo(x, 0); // x, y
context.lineTo(x, vh);
}
// horizontal lines
for (var y = 0; y <= vh; y += cellH) {
context.moveTo(0, y); // x, y
context.lineTo(vw, y);
}
context.strokeStyle = "#cccccc";
context.stroke();
}
ALSO HERE ARE PICTURES TO SHOW YOU HOW IT LOOKS:
BEFORE RESIZING
AFTER RESIZING
Any help or explanation would be much appreciated. Thank you!
EDIT
Here is a full code to test out the problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.dropZone {
width: 581px;
height: 821px;
padding: 0;
margin: 0;
background: #fff;
}
</style>
</head>
<body>
<canvas id="can1" class="dropZone ui-widget-header" width=581 height=821 >
</canvas>
<script>
function getDocumentWidth() {
return Math.min(document.documentElement.clientWidth, window.innerWidth || 0);
};
function getDocumentHeight() {
return Math.min(document.documentElement.clientHeight, window.innerHeight || 0)
};
var canvas = document.getElementById('can1');
var context = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = getDocumentWidth();
canvas.height = getDocumentHeight();
drawDots();
}
function drawDots() {
var r = 1;
for (var x = 20; x < canvas.width; x += 20) {
for (var y = 20; y < canvas.height; y += 20) {
context.fillRect(x - r / 2, y - r / 2, r, r);
}
}
}
resizeCanvas();
</script>
</body>
</html>
To solve this I added the canvas inside a div with the dimensions I wanted. (The problem was caused by setting dimensions to the canvas).
As such:
<div id="can2" class="dropZone ui-widget-header">
<canvas id="can1"></canvas>
</div>
Related
For my pixel art website, I have a canvas that is fixed relative to the viewport, scaled with css, and has object-fit:contain; to keep it the size of the div, no matter what is drawn or resized inside.
I need to get the mouse click coordinates without scaling. The scaled coordinates collected by e.y/e.x wouldn't be useful since object-fit:contain; would change aspect ratios.
Here is some dummy code to better explain my question:
var c = document.getElementById("scaledCanvas");
var ctx = c.getContext('2d');
c.height = 16; // varaible height
c.width = 16; // varaible width
for (var x = 0; x < c.width; x++) {
for (var y = 0; y < c.height; y++) {
ctx.fillStyle = "#" + Math.floor(Math.random() * 16777215).toString(16); // pick random color
ctx.fillRect(x, y, 1, 1); // draw pixel on canvas
}
}
c.addEventListener('click', function(e) {
//this is what i need help with, clickX and clickY need to give the pixel coordinates of the canvas, not the screen
let clickX = e.x - this.offsetLeft;
let clickY = e.y - this.offsetTop;
console.log(clickX + ", " + clickY);
}, false);
#scaledCanvas {
width: 50vw;
height: 50vh;
image-rendering: pixelated;
object-fit: contain;
background-color: black;
}
<!DOCTYPE html>
<html>
<body>
<canvas id="scaledCanvas" width="16" height="16">Canvas Not Supported</canvas>
</body>
</html>
Should it be something like that? I take the "pixel's" cell coords.
var c = document.getElementById("scaledCanvas");
var ctx = c.getContext('2d');
c.height = 16; // varaible height
c.width = 16; // varaible width
for (var x = 0; x < c.width; x++) {
for (var y = 0; y < c.height; y++) {
ctx.fillStyle = "#" + Math.floor(Math.random() * 16777215).toString(16); // pick random color
ctx.fillRect(x, y, 1, 1); // draw pixel on canvas
}
}
c.addEventListener('click', function(e) {
let realWidth = c.getBoundingClientRect().width;
let realHeight = c.getBoundingClientRect().height;
let cellSize = (realWidth < realHeight) ? realWidth/16 : realHeight/16;
let clickX = Math.floor((e.x - this.offsetLeft - (realWidth - cellSize*16)/2)/cellSize);
let clickY = Math.floor((e.y - this.offsetTop - (realHeight - cellSize*16)/2)/cellSize);
console.log(clickX + ", " + clickY);
}, false);
#scaledCanvas {
width: 50vw;
height: 50vh;
image-rendering: pixelated;
object-fit: contain;
background-color: black;
}
<canvas id="scaledCanvas" width="16" height="16">Canvas Not Supported</canvas>
The following question is based on an adaption I wish to make of this codepen:
Here is a Pen
I have the following html for displaying the canvas (I want it to be only in a section on the html page and not take up the whole page)
<div class="container">
<canvas id="c"></canvas>
</div>
The javascript for the canvas which shows an animation is below.
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var H = window.innerHeight;
var W = window.innerWidth;
canvas.height = H;
canvas.width = W;
var NBR_PARTICLES = 100;
var INTENSITY = 55;
var BLUE_RATIO = 5;
particles = [];
for (var i = 0; i < NBR_PARTICLES; i++) {
particles.push( new particle(i) );
};
function particle(i){
this.size = rand(0, 1.4);
this.x = W / 2;
this.y = H / 2;
this.vx = rand(-1, 1);
this.vy = rand(-1, 1);
this.decay = rand(0.9, 1);
this.c = 0;
}
function draw(){
for (var i = 0; i < NBR_PARTICLES; i++) {
p = particles[i];
ctx.fillStyle = color(p.size);
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, Math.PI*2, false);
ctx.fill();
p.size *= p.decay;
p.x += p.vx;
p.y += p.vy;
p.vx += rand(-.2, .2);
p.vy += rand(-.2, .2);
p.c++;
if(p.size < .2){
particles[i] = new particle(i);
}
};
}
function color(i){
value = 255 - Math.round( (i * (255 / NBR_PARTICLES)) * INTENSITY);
return "rgba(" + value + ", 0, " + Math.round((NBR_PARTICLES - i) / BLUE_RATIO) + ", .75)";
}
setInterval(draw, 33);
/*************************
CONSTRUCT FUNCTIONS
**************************/
function rand(min, max){
value = min + Math.random() * ( max - min );
return value;
}
function cd(args){ // FOR DEBUG
console.dir(args);
}
</script>
I want the canvas size to be a rectangular banner across the page rather than the whole page as it is now.
I have tried changing these variables
var H = window.innerHeight;
var W = window.innerWidth;
canvas.height = H;
canvas.width = W;
to
canvas.height = 200;
canvas.width = 800;
but that doesn't render the animation at all but does appear to resize the canvas.
The CSS here appears to override the existing body as the whole animation takes over the page and my existing content is no longer displayed.
body, html{
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ddd;
}
I tried removing the body from the css but that didn't work at all.
I also, as you can see above, added a div container, hoping that would isolate the canvas but that hasn't worked either.
<div class="container">
<canvas id="c"></canvas>
</div>
How do I adapt this code to make the canvas only render on a portion (width and height of the canvas decided by me) on the screen.
Setting directly the height H and width W , will show canvas correctly at center :
below snippet you can see result centred annilation correctly
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// set here canvas width and height directly
var H = 200;
var W = 200;
canvas.height = H;
canvas.width = W;
var NBR_PARTICLES = 100;
var INTENSITY = 55;
var BLUE_RATIO = 5;
particles = [];
for (var i = 0; i < NBR_PARTICLES; i++) {
particles.push( new particle(i) );
};
function particle(i){
this.size = rand(0, 1.4);
this.x = W / 2;
this.y = H / 2;
this.vx = rand(-1, 1);
this.vy = rand(-1, 1);
this.decay = rand(0.9, 1);
this.c = 0;
}
function draw(){
for (var i = 0; i < NBR_PARTICLES; i++) {
p = particles[i];
ctx.fillStyle = color(p.size);
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, Math.PI*2, false);
ctx.fill();
p.size *= p.decay;
p.x += p.vx;
p.y += p.vy;
p.vx += rand(-.2, .2);
p.vy += rand(-.2, .2);
p.c++;
if(p.size < .2){
particles[i] = new particle(i);
}
};
}
function color(i){
value = 255 - Math.round( (i * (255 / NBR_PARTICLES)) * INTENSITY);
return "rgba(" + value + ", 0, " + Math.round((NBR_PARTICLES - i) / BLUE_RATIO) + ", .75)";
}
setInterval(draw, 33);
/*************************
CONSTRUCT FUNCTIONS
**************************/
function rand(min, max){
value = min + Math.random() * ( max - min );
return value;
}
function cd(args){ // FOR DEBUG
console.dir(args);
}
body, html{
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ddd;
text-align:center
}
canvas {
border : 1px solid gray;
}
<canvas id="c"></canvas>
This question already has an answer here:
Impossible to add pseudo element to canvases?
(1 answer)
Closed 3 years ago.
As you can see I wan to have a line running through the center of my canvas, so I have decided to use the after element! It is rendering, as can bee seen in the screenshot of the console, but for whatever reason it eill not display! I am at a loss of what I am doing wrong! Thank you! Here is my Code Pen
The code:
function start() {
var canvas = $("canvas");
console.log(canvas);
canvas.each(function(index, canvas) {
var context = canvas.getContext("2d");
canvas.width = $(".box").eq(index).width();
canvas.height = $(".box").eq(index).height();
context.clearRect(0, 0, canvas.width, canvas.height);
drawCurves(context, step);
step += 1;
});
requestAnimationFrame(start);
}
var step = -1;
function drawCurves(ctx, step) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
ctx.lineWidth = 2;
for (i = 0; i < 4 ; i++) {
var x = 0;
var y = 0;
ctx.beginPath();
if (i === 0 ) {
ctx.strokeStyle = "red";
var amplitude = 20;
var frequency = height / (2 * Math.PI);
console.log(i, frequency);
ctx.save();
ctx.translate(-amplitude * Math.sin(step / frequency), 0);
} if ( i === 1) {
ctx.strokeStyle = "blue";
var amplitude = 30;
var frequency = (height / (2 * Math.PI));
console.log(i, frequency);
ctx.save();
ctx.translate(-amplitude * Math.sin(step / frequency), 0);
} if ( i === 2) {
ctx.strokeStyle = "green";
var amplitude = 40;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
ctx.save();
ctx.translate(-amplitude * Math.sin(step / frequency), 0);
} if (i === 3) {
ctx.strokeStyle = "yellow";
var amplitude = 50;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
ctx.save();
ctx.translate(-amplitude * Math.sin(step / frequency), 0);
}
while (y < height ) {
x = (width / 2) + (amplitude * Math.sin((y + step) / frequency)) ;
ctx.lineTo(x, y);
y++;
}
ctx.stroke();
ctx.restore();
}
}
$(document).ready(function() {
start();
})
canvas {
background-color: wheat;
position: absolute;
&:after {
content: '';
display: block;
position: absolute;
background-color: #EA777A;
width: 20px;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
.box {
width: 500px;
height: 2000px;
border: solid;
}
.box.t {
width: 500px;
height: 200px;
border: solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box t">
<canvas id="canvas"></canvas>
</div>
<div class="box">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
Screenshot of the rendered code:
Canvas can't have an ::after. You can wrap it in a <div> and give that an ::after though.
I have the following Javascript, HTML and CSS code
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
function draw() {
var img = new Image();
img.src = 'http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png';
var el = document.getElementById('DrawingPattern');
var ctx = el.getContext('2d');
ctx.lineJoin = ctx.lineCap = 'round';
var isDrawing, lastPoint;
el.onmousedown = function (e) {
isDrawing = true;
lastPoint = {x: e.clientX, y: e.clientY};
};
el.onmousemove = function (e) {
if (!isDrawing) return;
var currentPoint = {x: e.clientX, y: e.clientY};
var dist = distanceBetween(lastPoint, currentPoint);
var angle = angleBetween(lastPoint, currentPoint);
for (var i = 0; i < dist; i++) {
x = lastPoint.x + (Math.sin(angle) * i) - 25;
y = lastPoint.y + (Math.cos(angle) * i) - 25;
ctx.drawImage(img, x, y);
}
lastPoint = currentPoint;
};
el.onmouseup = function () {
isDrawing = false;
};
}
html, body {
color: #fff;
background: #000;
font-family: "Lucida Grande";
}
canvas{
position: static;
cursor: move;
margin: auto;
width: 70%;
border: 3px solid #73AD21;
background: white;
overflow: visible;
}
<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>
The whole code works, the only problem that I'm having is when I start drawing on the canvas, the cursor doesn't line up with the effective position of the cursor. So when I draw it does the lines in another position, higher or lower than the actual position of the cursor is. I've tried different ways but, I guess is some sort of scaling problem but I'm not able how to fix it.
It is a scaling problem. Even though you scale the canvas element by setting CSS width by percentage, the size of the drawing area doesn't change. You get the mouse coordinates in screen space, but you need to transform into canvas space when drawing.
To do this, calculate the scale by taking into account the difference between el.width (canvas width) and el.offsetWidth (element width). As the canvas is scaled proportionately by keeping the aspect ratio, the same scaling can be used for both the X and Y coordinates.
I have added an elementScale() function and updated the code to multiply clientX and clientY with the return value.
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
function elementScale(el) {
return el.offsetWidth === 0 ? 0 : (el.width / el.offsetWidth);
}
function draw() {
var img = new Image();
img.src = 'http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png';
var el = document.getElementById('DrawingPattern');
var ctx = el.getContext('2d');
ctx.lineJoin = ctx.lineCap = 'round';
var isDrawing, lastPoint;
el.onmousedown = function (e) {
var scale = elementScale(el);
isDrawing = true;
lastPoint = {x: e.clientX * scale, y: e.clientY * scale};
};
el.onmousemove = function (e) {
if (!isDrawing) return;
var scale = elementScale(el);
var currentPoint = {x: e.clientX * scale, y: e.clientY * scale};
var dist = distanceBetween(lastPoint, currentPoint);
var angle = angleBetween(lastPoint, currentPoint);
for (var i = 0; i < dist; i++) {
x = lastPoint.x + (Math.sin(angle) * i) - 25;
y = lastPoint.y + (Math.cos(angle) * i) - 25;
ctx.drawImage(img, x, y);
}
lastPoint = currentPoint;
};
el.onmouseup = function () {
isDrawing = false;
};
}
html, body {
color: #fff;
background: #000;
font-family: "Lucida Grande";
}
canvas{
position: static;
cursor: move;
margin: auto;
width: 70%;
border: 3px solid #73AD21;
background: white;
overflow: visible;
}
<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>
Just like DarthJDG said, it's a scaling problem with your CSS
You could just remove your CSS width:70% on your canvas, and try to adjust just like usual
CSS CODE
html, body {
color: #fff;
background: #000;
font-family: "Lucida Grande";
}
canvas{
position: static;
cursor: move;
margin: auto;
//width:70%; //REMOVED
border: 3px solid #73AD21;
background: white;
overflow: visible;
}
JAVASCRIPT CODE
for (var i = 0; i < dist; i++) {
x = lastPoint.x + (Math.sin(angle) * i) - 25; //CHANGED
y = lastPoint.y + (Math.cos(angle) * i) - 25; //CHANGED
ctx.drawImage(img, x, y);
}
Just by removing the CSS width, your scaling will go normal again.
I'm trying to make a ball which moves on a line and it bounces on it when clicked on it, but I don't know how to make it bounce on click.
Also, c.fill() doesn't work, I don't know why. (I've used it to fill the ball, maybe it doesn't work like that?)
Any advice would be really helpful since I'm a beginner in canvas, but know these 2 problems really concern me as I can't find any solutions for any of them. 😞
document.addEventListener('DOMContentLoaded', function () {
var canvas = document.querySelector('canvas');
var canvasx = document.getElementById('hr');
var c = canvas.getContext('2d');
canvas.width = canvasx.clientWidth;
canvas.height = canvasx.clientHeight;
var x = 80;
var y = 30;
var dx = 6;
var dy = 2;
var radius = 15;
var gravity = Math.random();
var friction = 0.9;
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
c.beginPath();
c.arc(x, y, radius, 0, Math.PI * 2, false);
c.strokeStyle = "#eeede7";
c.stroke();
c.beginPath();
c.moveTo(50, canvas.height);
c.lineTo(1870, canvas.height);
c.lineWidth = 3;
c.fillStyle = "#77dff1";
c.fill();
c.strokeStyle = "#77dff1";
c.stroke();
update = function () {
if (y + 20 > canvas.height) {
dy = -dy * friction;
}
else {
dy += gravity;
}
y += dy;
x += dx;
}
function bounce() {
if ((x + radius + 50) > canvas.width || (x - radius - 50) < 0) {
dx = -dx;
}
}
update();
bounce();
}
animate();
function over() {
var px = event.pageX;
if (x - px < 0 || x - px > 0)
{
dx = -dx;
}
}
function bounceBall()
{
}
canvas.addEventListener('mouseover', over, false);
canvas.addEventListener('click', bounceBall, false)
}, false);
#hr {
position: relative;
bottom: 5%;
width: 100%;
margin: 0 auto;
}
hr {
border-color: #77dff1;
max-width: 90%;
}
canvas {
width: 100%;
}
<div id="hr">
<canvas></canvas>
<script src="js/canvas.js"></script>
</div>