I've played around with the draw function but now that i'm moving on to images i've hit a brick wall. here is the code:
var x
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ghost = new Image();
ghost.src = "ghost.png"
window.setTimeout(x, 5000);
var drawIm = function (sprite) {
ctx.save();
ctx.translate(100, 100);
ctx.drawImage(sprite, 0, 0, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
ctx.restore();
};
drawIm(ghost);
I'm sure it's nothing to do with the file names or anything, and i can't see any problem with it, but the ghost just won't appear! What's the problem?
You need to draw the ghost when it's loaded. SO, do something like ...
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ghost = new Image();
//ghost onload event
ghost.onload = function() {
drawIm(ghost);
}
ghost.src = "https://lessonpix.com/drawings/2587/100x100/Happy+Ghost.png";
var drawIm = function(sprite) {
ctx.save();
ctx.translate(100, 100);
ctx.drawImage(sprite, 0, 0, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
ctx.restore();
};
<canvas id="canvas" width="200" height="200"></canvas>
Related
I'm trying to extract a part of an image through the getImageData function for canvas.
The difficulty is that my part is rotated. My goal is to extract for example the rectangle on the image :
To draw the rectangle below, I use a translation and a rotation, but these functions don't work when we use getImageData.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, img.width, img.height);
drawRect();
}
img.src = "https://dummyimage.com/300x150/5873f0/ffffff.jpg";
function drawRect() {
ctx.save();
ctx.translate(75, 100);
ctx.rotate(20 * Math.PI / 180)
// imgData = ctx.getImageData(-50, -25, 100, 50);
ctx.strokeStyle = 'black';
ctx.strokeRect(-50, -25, 100, 50);
ctx.restore()
}
<canvas id="myCanvas" width="300" height="150">
Your browser does not support the HTML5 canvas tag.</canvas>
This is the Fiddle I use. Thanks!
I'm super new to coding and I've been trying to figure out animations with Javascript and HTML5. I have this "loading bar" like animation where a rectangle expands until it fills up the canvas. The idea is that once the canvas is covered the box clears and starts over. Instead, the rectangle fills the canvas and just starts flickering. Any ideas?
window.onload = function() {
var wipeWidth = 0
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
console.log(context);
function drawRect() {
context.clearRect(0,0,300,150)
context.fillStyle = "#305ef2";
context.rect(0, 0, wipeWidth, 150);
context.fill()
wipeWidth += 10
if(wipeWidth > 300) {
wipeWidth = 0;
}
}
setInterval(drawRect,50)
}
You forgot to clear the path (beginPath). You can use fillRect instead to avoid this.
window.onload = function() {
var wipeWidth = 0
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
console.log(context);
function drawRect() {
context.clearRect(0, 0, 300, 150)
context.fillStyle = "#305ef2";
// this
context.beginPath()
context.rect(0, 0, wipeWidth, 150);
context.fill()
// or just this
// context.fillRect(0, 0, wipeWidth, 150);
wipeWidth += 10
if (wipeWidth > 300) {
wipeWidth = 0;
}
}
setInterval(drawRect, 50)
}
<canvas id="canvas"></canvas>
fillRect, requestAnimationFrame
var wipeWidth = 0
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var direction = +10;
function drawRect() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#305ef2";
context.fillRect(0, 0, wipeWidth, 150);
wipeWidth += direction
if (wipeWidth > canvas.width || wipeWidth < 0) {
direction *= -1;
}
requestAnimationFrame(drawRect)
}
drawRect()
canvas {
background: gray;
}
<canvas id="canvas" width="600" height="50"></canvas>
didn't look like a floor tiles. Some transformation / rotate / Angle was missing. How to do perspective view with html5 canvas
here is the code
function drawPattern(img, size, rectY) {
var roomImg = new Image();
roomImg.src = './assets/room2.png';
roomImg.onload = function() {
ctx.drawImage(roomImg, 0, 0, canvas.width, canvas.height);
ctx.restore();
}
var canvas = document.getElementById('canvas1');
canvas.width = 1350;
canvas.height = 600;
var tempFloorCanvas = document.createElement("canvas");
var tFloorCtx = tempFloorCanvas.getContext("2d");
tempFloorCanvas.width = size;
tempFloorCanvas.height = size;
tFloorCtx.drawImage(floorimg, 0, 0, floorimg.width, floorimg.height, 0, 0, size, size);
tFloorCtx.setTransform(1,1,-0.5,1,30,10);
tFloorCtx.rotate(50);
tFloorCtx.fill();
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ctx.createPattern(tempFloorCanvas, 'repeat');
ctx.beginPath();
ctx.rect(0,400,canvas.width, 400);
ctx.closePath();
ctx.fill();
ctx.restore();
}
var floorimg = new Image();
floorimg.src = './assets/tile5.jpg';
floorimg.onload = function(){
drawPattern(floorimg, 70, 0);
}
If there is another solution to implement the feature or If there are third party plugins which can transform my canvas to some angle to be look like a floor of the room, then please let me know.
Out of the box the HTML5 CanvasRenderingContext2D API does not offer a way to do perspective projection. There are some full-blown third-party libraries, foremost Three.js that among other things let you do such kind of transformations.
However, if all you want to do is just perspectively distort an image it would be overkill to learn the Three.js API or even worse implementing it on your own using WebGL.
Luckily there is a tiny library called perspective.js.
Here's an example:
let canvas = document.getElementById("canvas");
let image = new Image();
image.onload = function() {
let ctx = canvas.getContext("2d");
let p = new Perspective(ctx, image);
p.draw([
[30, 0],
[canvas.width - 30, 0],
[canvas.width, canvas.height],
[0, canvas.height]
]);
}
image.src = "https://picsum.photos/id/1079/200/300";
canvas {
border: gray solid 1px;
}
<script src="https://cdn.rawgit.com/wanadev/perspective.js/master/dist/perspective.min.js"></script>
<canvas id="canvas"></canvas>
var testPhoto = new Image();
testPhoto.src = "http://plan9.bell-labs.com/plan9/img/9logo.jpg"
testPhoto.className = "pulse";
and then:
topSlice.drawImage(testPhoto, 100, 200, 40, 40);
It appears the pulsating effect doesn't work after drawing the image, how should I fix this? I'm following this tutorial for the pulsating effect.
You can use Window.requestAnimationFrame instead and work with blend modes / alpha blending:
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
image = new Image();
image.src = "http://plan9.bell-labs.com/plan9/img/9logo.jpg";
function update(timestamp) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.globalAlpha = Math.sin(timestamp/100) * 0.5 + 0.5;
context.drawImage(image, 0, 0);
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
<canvas id="canvas"></canvas>
I wrote a function that draws out a slice of a pizza based on how big you specify it to be (in degrees)
function drawProgress(degs){
var canvas = document.getElementById('progress');
var context = canvas.getContext('2d');
context.globalAlpha=1;
var img = new Image();
img.onload = function(){
context.beginPath();
context.arc(canvas.width/2,canvas.height/2, canvas.height/2, 0, degs * (-Math.PI/180), true);
context.lineTo(canvas.width/2, canvas.height/2);
context.clip();
context.drawImage(img, 0, 0, canvas.width,canvas.width);
}
img.src = 'pizza.png';
}
When I try to call this function every 250ms, the progress is not updated after the first draw.
function runsEvery250ms(percent){
drawProgress(3.6 * percent);
}
What changes do I need to make to the code to get the canvas to redraw each time drawProgress(degs) is called? Is it possible to perform redraws without causing the pizza to flicker?
Use context.clearRect(0, 0, canvas.width, canvas.height); and cache your image, don't reload each time you refresh
UPDATE: No idea if this will work, untested and been a while since I used canvas but try it
var canvas = document.getElementById('progress');
var context = canvas.getContext('2d');
var img = new Image();
var imgLoaded = false;
img.src = 'pizza.png';
img.onload = function(){
imgLoaded = true;
}
function drawProgress(degs){
context.save();
context.clearRect(0, 0, canvas.width, canvas.height);
context.globalAlpha=1;
context.beginPath();
context.arc(canvas.width/2,canvas.height/2, canvas.height/2, 0, degs * (-Math.PI/180), true);
context.lineTo(canvas.width/2, canvas.height/2);
context.clip();
if (imgLoaded) context.drawImage(img, 0, 0, canvas.width,canvas.width);
context.restore();
}