I have this code here: http://jsfiddle.net/m1erickson/98Bgq/
And I need to Increase drawing canvas for 550px of width and 400px height, and something tells me that this line:
var arcCount = colors.length;
var arcAngle = Math.PI * 2 / arcCount;
var cx = 150;
var cy = 150;
var radius = 75;
var lineWidth = 25;
And I don't know how to do that, someone can help me?
Just get the canvas DOM element and change its width and height properties.
var canvas = document.getElementById('canvas');
canvas.width = 550;
canvas.height = 400;
Related
I'm using a simple clearInterval draw animation to animate a spritesheet. I have two animations and have set the canvas size the same for both. I have checked the width of the spritesheet to make sure it's correct. For some reason the animation executes but my character slides left and part of the next frame becomes visible before starting the animation over. I've checked over and over for bugs. Hopefully just missed something easy. Here is my code. Spritesheet with issue is posted in a link at the bottom of post. Thank you so much.
// QUIZGAME ANIMATION
var canvasWidth = 200;
var canvasHeight = 250;
var canvas2Height = 250;
var canvas2Width = 200;
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
document.addEventListener("DOMContentLoaded", function(event) {
canvas1.width = canvasWidth;
canvas1.height = canvasHeight;
canvas2.height = canvas2Height;
canvas2.width = canvas2Width;
});
var spriteWidth = 605;
var spriteHeight = 200;
var sprite2Width = 1632;
var sprite2Height = 200;
var columns = 3;
var rows = 1;
var columns2 = 11;
var rows2 = 1;
var width = spriteWidth / columns;
var height = spriteHeight / rows;
var height2 = sprite2Height / rows2;
var width2 = sprite2Width / columns2;
var curFrame = 0;
var curFrame2 = 0;
var frameCount = 3;
var frameCount2 = 11;
var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;
var frameX = 0;
var frameY = 0;
var frameX2 = 0;
var frameY2 = 0;
var ctx = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var character = new Image();
var character2 = new Image();
character.src = "img/testanimation.png";
character2.src = "https://i.stack.imgur.com/7uRCO.png";
function changeFrameIndex() {
curFrame = ++curFrame % frameCount;
frameX = curFrame * width;
ctx.clearRect(x, y, width, height);
}
function changeFrame2Index() {
curFrame2 = ++curFrame2 % frameCount2;
frameX2 = curFrame2 * width2;
ctx2.clearRect(x2, y2, width2, height2);
}
function draw() {
//Updating the frame
changeFrameIndex();
//Drawing the image
ctx.drawImage(character, frameX, frameY, width, height, x, y, width, height);
}
function draw2() {
changeFrame2Index();
ctx2.drawImage(character2, frameX2, frameY2, width2, height2, x2, y2, width2, height2);
}
//setInterval(draw, 140); // disabled by editor because source is unavailable
setInterval(draw2, 100);
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
spritesheet with issue
I have partially resolved the issue but I'm still a little confused. I cropped some empty space off the end of the spritesheet (making sprite2Width = 1604 instead of the original 1632) which helped, reducing the motion to next to none, but for some reason I still have to clarify a width that is 4-6 px shorter than the actual png. The animation is working now after cropping spritesheet width at 1604px and setting the sprite2Width = 1598; (as opposed to 1604). Anyone have any idea why there is a 6 px difference here? CSS related maybe? Atleast it is working.
The first thing you should do when troubleshooting something like that is simplify your code...
Take it to the bare basic, then start playing with the variables that build each frame, yes like you find out there is a 6px padding on each sprite, you can compensate that on code see the calculation of the width.
var character = new Image();
character.src = "https://i.stack.imgur.com/7uRCO.png";
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var spriteWidth = 1632;
var columns = 11;
var width = (spriteWidth / columns) - 3;
var curFrame = 0;
function draw() {
ctx.clearRect(0, 0, 900, 900);
curFrame = ++curFrame % columns;
ctx.drawImage(character, curFrame * width, 0, width, 200, 0, 0, width, 200);
}
setInterval(draw, 100);
<canvas id="canvas" height=175></canvas>
...and for the record that sprite is not the best looking one
I am having an issue when I'm trying to render multiple offscreen canvases into onscreen canvas. I do get one offscreen canvas rendered but the problem is that there should be two other rendered before. In other words, only last canvas is rendered. The expected result would be three overlapping rectangles (or squares :) in red, green and blue. Here's the code:
function rectangle(color) {
var offScreenCanvas = document.createElement('canvas');
var offScreenCtx = offScreenCanvas.getContext('2d');
var width = offScreenCanvas.width = 150;
var height = offScreenCanvas.height = 150;
switch(color) {
case 1:
offScreenCtx.fillStyle='rgb(255,0,0)';
break;
case 2:
offScreenCtx.fillStyle='rgb(0,255,0)';
break;
case 3:
offScreenCtx.fillStyle='rgb(0,0,255)';
break;
}
offScreenCtx.fillRect(0,0,width,height);
return offScreenCanvas;
}
function draw(offScreenCanvas, x , y) {
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
ctx.drawImage(offScreenCanvas, x, y);
}
var images = [];
var color = 1;
for (var i=0; i<3; i++) {
var img = new rectangle(color);
images.push(img);
color++;
}
var x = 0;
var y = 0;
for (var i = 0; i < images.length; i++) {
draw(images[i], x, y);
x += 100;
y += 100;
}
I did some searching and it seems that I'm not the first with this issue, but I could not get this working properly.
Setting canvas height or width clears the canvas.
The problem with your code is that you are causing the onscreen canvas to be cleared when you set it size in the function draw
Setting the canvas size, even if that size is the same, will cause the canvas context to reset and clear the canvas. All the other canvases are rendered, but erased when you set the onscreen canvas size.
Your draw function
function draw(offScreenCanvas, x , y) {
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
// The cause of the problem ===================================
// Either one of the following lines will clear the canvas
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
//=============================================================
ctx.drawImage(offScreenCanvas, x, y);
}
To avoid this just set the canvas size once. If you need to resize the canvas and keep its content you first need to create a copy of the canvas, then resize it, then render the copy back to the original.
Demo shows 5 offscreen canvases being rendered onto one onscreen canvas.
const colours = ['#f00', '#ff0', '#0f0', '#0ff', '#00f'];
const ctx = can.getContext('2d');
can.width = innerWidth - 4; // sub 4 px for border
can.height = innerHeight - 4;
function createCanvas(color, i) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 150;
canvas.height = 150;
ctx.font = "24px arial";
ctx.fillStyle = color;
ctx.fillRect(0, i * 30, canvas.width, 30);
ctx.fillStyle = "black";
ctx.fillText("Canvas "+i,10,(i + 0.75) * 30);
return canvas;
}
colours.forEach((c, i) => {
ctx.drawImage(createCanvas(c, i), 0, 0);
})
canvas {
border: 2px solid black;
position : absolute;
top : 0px;
left : 0px;
}
<canvas id="can"></canvas>
How to place images in html5 canvas in a row based on no.of images given dynamically and how distribute space between the rows, where the no.of rows are also given dynamically?
If you want to do layout as simple as that in javascript, you can just do it yourself. The example below evenly spaces the rows based on the height of the canvas, and then within each row, the rectangles are evenly spaced by the width of the canvas. You can resize the browser and watch how the layout moves the rectangles around.
var imageHeight = 100;
var imageWidth = 80;
//This defines how many pictures are in each row
var rowCount = [
2,
3,
5
];
setCanvasSize();
redrawCanvas();
function setCanvasSize() {
var can = document.getElementById("myCanvas");
var width = window.innerWidth;
var height = window.innerHeight;
can.width = width;
can.height = height;
}
function redrawCanvas() {
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");
ctx.clearRect(0, 0, width, height);
var width = can.width;
var height = can.height;
//
// This is the layout function ------------------------
//
//how many pixels per row are available?
var pixelsPerRow = height/rowCount.length;
for (var y=0;y<rowCount.length;y++) {
//draw the yth row:
var imagesInRow = rowCount[y];
var pixelsPerImage = width / imagesInRow;
for (var x=0;x<imagesInRow;x++) {
//now find the center of the cell defined by the
//x and y coordinates:
var xC = (x * pixelsPerImage) + (pixelsPerImage / 2);
var yC = (y * pixelsPerRow) + (pixelsPerRow / 2);
//now place the image in the center of the cell by offsetting half of the image's width and height:
var xI = xC - (imageWidth / 2);
var yI = yC - (imageHeight / 2);
//instead of drawing an image, for this example a rectangle is being drawn instead:
ctx.fillStyle = "#000";
ctx.fillRect(xI, yI, imageWidth, imageHeight);
}
}
}
window.onresize = function() {
setCanvasSize();
redrawCanvas();
};
<canvas id="myCanvas"></canvas>
I'm trying to draw a little chart using some JavaScript and the canvas.
I'm doing a stuff like that :
RadarChart.prototype.fillRadar = function () {
var nbLabel = this.data.labels.length;
this.context.save();
this.context.lineWidth = 0.5;
this.context.lineJoin = "round";
this.context.translate(this.canvas.width / 2, this.canvas.height / 2);
this.context.strokeStyle = this.data.lineColor;
for (var i = 0; i < nbLabel; i++) {
this.context.moveTo(0, 0);
this.context.lineTo(0, -((this.canvas.height / 2) - 30))
this.context.stroke();
this.context.rotate((Math.PI / 180) * (360 / nbLabel));
}
this.context.restore();
}
the problem is that my lines are so pixelated and are not perfect. their width seems to change. It's like it's fading out over time...
Why is it doing that? How can I fix it?
Thanks for help.
Don't set the width / height of the canvas using css
use
canvas.width = 500;
canvas.height = 500;
make a function that find out how much 20% of the screen represent in pixel and then set the width/height in the code.
I created breakout using some jquery and a handy tutorial online.
Here is the fiddle: http://jsfiddle.net/Kinetic915/9bLEk/6/
I successfully changed the WIDTH and HEIGHT accessing the window size like this:
From:
WIDTH = $("#canvas")[0].width = $(window).width();
HEIGHT = $("#canvas")[0].height = $(window).height();
To:
var WIDTH = document.getElementById("canvas");
var HEIGHT = document.getElementById("canvas");
WIDTH.width = window.innerWidth;
HEIGHT.height = window.innerHeight;
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
the code loads properly. I am finding a problem changing the code that renders the ball.
It works with jquery here:
Cir = $('#canvas')[0].getContext("2d");
Cir.beginPath();
Cir.arc(x, y, 10, 0, Math.PI * 2, true);
Cir.closePath();
Cir.fill();
Does not work with:
var canvas = document.getElementById("canvas");
var Cir = canvas.getContext("2d");
Cir.beginPath();
Cir.arc(x, y, 10, 0, Math.PI * 2, true);
Cir.closePath();
Cir.fill();
any suggestions?
Change it to this:
var canvas = document.getElementById("canvas");
var Cir = canvas.get(0).getContext("2d");