Develop Reference

Javascript canvas drawimage() doesn't work after using clearrect() [duplicate]

This question already has answers here:
Flickering images in canvas animation
(2 answers)
Closed 1 year ago.
I try to make an animation using the following code:
var obst = new Obstacle(x, y)
obst.build()
function animate() {
ctx.clearRect(0, 0, innerWidth, innerHeight);
requestAnimationFrame(animate);
obst.update(-1, 0)
player1.build();
}
but obst var doesn't appear (but player1 appears)
class for obst:
class Obstacle {
constructor(x, y) {
this.x = x;
this.y = y;
}
build() {
var img = new Image();
img.src = 'assests/obst.png';
img.onload = () => {
ctx.drawImage(img, this.x, this.y, 60, 60);
}
}
update(x, y) {
this.x += x;
this.y += y;
this.build()
}
}
When I run the code without clearrect() syntax it shows as it should be.
Full code:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, innerWidth, innerHeight);
obst.update(-1, 0)
player1.build();
}
class Player {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
}
build() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color;
ctx.fill();
}
update(x, y) {
this.x += x
this.y += y
this.build()
}
}
class Obstacle {
constructor(x, y) {
this.x = x;
this.y = y;
}
build() {
var img = new Image();
img.src = 'assests/obst.png';
img.onload = () => {
ctx.drawImage(img, this.x, this.y, 60, 60);
}
}
update(x, y) {
this.x += x;
this.y += y;
this.build()
}
}
var obst = new Obstacle(canvas.width, canvas.height / 2 - 30)
obst.build()
var player1 = new Player(canvas.width / 2, canvas.height / 2, 30, 'blue');
player1.build();
animate();

The async task of loading the image should be removed from the update loop. Have the objects follow a pattern where building and updating / drawing are independent, and where building is async and happens once...
class Obstacle {
constructor(x, y) {
this.x = x;
this.y = y;
}
// don't use the object until this promise resolves
async build() {
var img = new Image();
img.src = 'assests/obst.png';
return new Promise(resolve => img.onload = resolve)
}
// call the method that draws current state "draw"
draw() {
ctx.drawImage(img, this.x, this.y, 60, 60);
}
// call the method that updates current state and draws "update"
update(x, y) {
this.x += x;
this.y += y;
this.draw()
}
}
class Player {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
}
// for symmetry, and maybe someday player will need to do async work here
async build() {
return Promise.resolve();
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color;
ctx.fill();
}
update(x, y) {
this.x += x
this.y += y
this.draw()
}
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, innerWidth, innerHeight);
obst.update(-1, 0)
player1.update(0, 1);
}
async function play() {
const obst = new Obstacle(canvas.width, canvas.height / 2 - 30)
await obst.build();
const player1 = new Player(canvas.width / 2, canvas.height / 2, 30, 'blue');
await player1.build();
animate();
}
play()

Why I'm getting only one rectangle?

let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];
const init = () => {
canvas.width = W = innerWidth;
canvas.height = H = innerHeight;
canvas.style.background = '#dedfda';
for (let i = 0; i <= 5; i++) {
let r = (i + 1) * 20;
objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
objArr[0].draw();
}
animate();
}
const random = (min = 0, max = 1) => Math.random() * (max - min) + min;
class Rectangle {
constructor(posX, posY, w, h, color, cx, cy, r) {
this.posX = posX;
this.posY = posY;
this.w = w;
this.h = h;
this.color = color;
this.cx = cx;
this.cy = cy;
this.r = r;
this.angle = 0;
}
draw() {
ctx.clearRect(0, 0, innerWidth, innerHeight);
ctx.fillStyle = this.color;
ctx.fillRect(this.posX, this.posY, this.w, this.h);
}
update() {
this.angle += 0.1;
this.posX = this.cx + this.r * Math.cos(this.angle);
this.posY = this.cy + this.r * Math.sin(this.angle);
this.draw();
}
}
const animate = () => {
objArr.forEach(e => {
e.update();
})
requestAnimationFrame(animate);
}
window.onload = init;
In this code, I'm expecting an output having 5 rectangles revolving around the center point of the window in different radius like the planets revolving around the Sun in solar system.
But I am getting only one rectangle and it's not even revolving.
Stucked and not getting why it's not working.

Your draw function is clearing every time and you are only referencing the first element of the array. Adjusting for both shows 6 objects revolving. Your loop runs from 0 to 5. If you want 5 objects, you'll need to set the upper bound to 4 instead.
let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];
const init = () => {
canvas.width = W = innerWidth;
canvas.height = H = innerHeight;
canvas.style.background = '#dedfda';
// adjusted range
for (let i = 0; i <= 4; i++) {
let r = (i + 1) * 20;
objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
objArr[i].draw();
}
animate();
}
const random = (min = 0, max = 1) => Math.random() * (max - min) + min;
class Rectangle {
constructor(posX, posY, w, h, color, cx, cy, r) {
this.posX = posX;
this.posY = posY;
this.w = w;
this.h = h;
this.color = color;
this.cx = cx;
this.cy = cy;
this.r = r;
this.angle = 0;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.posX, this.posY, this.w, this.h);
}
update() {
this.angle += 0.1;
this.posX = this.cx + this.r * Math.cos(this.angle);
this.posY = this.cy + this.r * Math.sin(this.angle);
this.draw();
}
}
const animate = () => {
// moved clear here to happen just once on each animate
ctx.clearRect(0, 0, innerWidth, innerHeight);
objArr.forEach(e => {
e.update();
})
requestAnimationFrame(animate);
}
window.onload = init;

You are just drawing one rectangle. Pay attention to
objArr[0].draw()
Which should be
objArr[i].draw()
Also, I think everytime an Rectange object's draw method is called the whole canvas is cleared in this line
ctx.clearRect(0, 0, innerWidth, innerHeight);
Hence, only one rectangle appears at all times.
A solution would be to move the calls to clearRect and update from Rectangle to the animate function. This way it fits better with the program logic. A Rectangle being an object should only know how to draw itself not clearing the canvas and updating its position on the canvas.
Below is my solution.
let canvas, ctx, W, H;
canvas = document.createElement('canvas');
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
let objArr = [];
const init = () => {
canvas.width = W = innerWidth;
canvas.height = H = innerHeight;
canvas.style.background = '#dedfda';
for (let i = 0; i <= 5; i++) {
let r = (i + 1) * 20;
objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r));
objArr[i].draw();
}
animate();
}
const random = (min = 0, max = 1) => Math.random() * (max - min) + min;
class Rectangle {
constructor(posX, posY, w, h, color, cx, cy, r) {
this.posX = posX;
this.posY = posY;
this.w = w;
this.h = h;
this.color = color;
this.cx = cx;
this.cy = cy;
this.r = r;
this.angle = 0;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.posX, this.posY, this.w, this.h);
}
// Should be moved outside of this class.
update() {
this.angle += 0.1;
this.posX = this.cx + this.r * Math.cos(this.angle);
this.posY = this.cy + this.r * Math.sin(this.angle);
ctx.fillRect(this.posX, this.posY, this.w, this.h)
}
}
const animate = () => {
ctx.clearRect(0, 0, innerWidth, innerHeight);
objArr.forEach(e => {
e.update();
})
requestAnimationFrame(animate);
}
window.onload = init;

change shapre of img

I need help with Transform moving square image to circle in html canvas
I have imported a image that is a square. I want that image be round and still move.
Goal:
square image to circle image, and still able to move.
I have tried alot of tutorial on stackoverflow mainly with c. stroke and c.split but when I apply those the image doesnt move anymore.
Does someone have any suggestions?
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function Circle() {
//Give var for circle
this.x = 10;
this.y = 100;
this.dx = 1;
this.dy = 1;
this.radius = 50;
this.diameter = 2 * this.radius;
//Get external square picture (Needs to be converted in circle)
var image = new Image();
image.src = "https://assets.coingecko.com/coins/images/2607/large/molecular_future.png?1547036754";
//Draw circle on canvas
this.draw = function () {
//Circle
c.beginPath();
c.arc(this.x, this.y, (this.radius*1), 0, Math.PI * 2, false);
c.closePath();
//TODO: cut square to circle
//Place square (image) on top of the circle
c.drawImage(image, (this.x-this.diameter/2) , (this.y-this.diameter/2), this.diameter, this.diameter);
};
//Update position
this.update = function () {
this.x += this.dx;
this.draw()
}
}
//Animate canvas
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
this.update();
}
//Start
Circle();
animate();
canvas {
border: 1px solid black;
background: black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas></canvas>
</body>
</html>

The answer is to use context.clip(); in your case c.clip(); this creates a clipping filter on the canvas that you can then draw in. Before you make a clip you must make a save and then restore after you draw with c.save(); and c.restore() respectively.
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
var circles = [];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function Circle() {
//Give var for circle
this.x = 100;
this.y = 100;
this.dx = 1;
this.dy = 1;
this.radius = 50;
this.diameter = 2 * this.radius;
this.size = null;
this.c = null;
//Get external square picture (Needs to be converted in circle)
var image = new Image();
image.src = "https://assets.coingecko.com/coins/images/2607/large/molecular_future.png?1547036754";
//Draw circle on canvas
this.draw = function () {
//Circle
this.c.beginPath();
this.c.arc(this.x, this.y, (this.radius*1), 0, Math.PI * 2, false);
this.c.closePath();
this.c.save();
this.c.clip();
//TODO: cut square to circle
//Place square (image) on top of the circle
this.c.drawImage(image, (this.x-this.diameter/2) , (this.y-this.diameter/2), this.diameter, this.diameter);
this.c.restore();
};
//Update position
this.update = function () {
if(this.x - this.radius <= 0 || this.x + this.radius >= this.size.x){this.dx = -this.dx}
this.x += this.dx;
this.draw()
}
this.init = function(options) {
Object.keys(options).forEach((key)=>{
this[key]=options[key];
})
}
}
//Animate canvas
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for(let i = 0; i < circles.length; i++){ circles[i].update(); }
}
//Start
for(let i = 0; i < 100; i-=-1){
let circle = new Circle();
circle.init({
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
size: {x: window.innerWidth,y: window.innerHeight},
c
})
circles.push(circle)
}
animate();
canvas {
border: 1px solid black;
background: black;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas></canvas>
</body>
</html>

Start by generating your composed image and then use it in your animation code.
To make such a compositing, you'd better use compositing than clipping, because clipping is an all or nothing operation, it won't deal well with the antialiasing required by a circle.
To store this composed image in a convenient way, you can either use a second canvas, or in newest browsers an ImageBitmap, both will then be drawable by drawImage.
Here is an ES5 implementation, using a second canvas and a callback:
// older browsers version
function makeCircleImage(radius, src, success, failure) {
var canvas = document.createElement('canvas');
canvas.width = canvas.height = radius * 2;
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// we use compositing, offers better antialiasing than clip()
ctx.globalCompositeOperation = 'destination-in';
ctx.arc(radius, radius, radius, 0, Math.PI*2);
ctx.fill();
success(canvas);
};
img.onerror = failure;
}
var url = "https://assets.coingecko.com/coins/images/2607/large/molecular_future.png?1547036754";
makeCircleImage( 50, url, function( canvas ) {
document.body.appendChild(canvas);
}, console.error );
canvas {
border: 1px solid black;
background: black;
}
And here is one that you can use in newest browsers which will store an ImageBitmap (preferable when available for memory and theoretical speed of drawing).
// newest browsers version
function makeCircleImage( radius, src ) {
return new Promise( (resolve, reject) => {
// this canvas will get Garbage Collected
const canvas = document.createElement( 'canvas' );
canvas.width = canvas.height = radius * 2;
const ctx = canvas.getContext( "2d" );
const img = new Image();
img.src = src;
img.onload = function() {
ctx.drawImage( img, 0, 0, canvas.width, canvas.height );
// we use compositing, offers better antialiasing than clip()
ctx.globalCompositeOperation = 'destination-in';
ctx.arc( radius, radius, radius, 0, Math.PI*2 );
ctx.fill();
resolve( createImageBitmap( canvas ) );
};
img.onerror = reject;
});
}
async function init() {
const url = "https://assets.coingecko.com/coins/images/2607/large/molecular_future.png?1547036754";
const img = await makeCircleImage(50, url);
document.querySelector('canvas')
.getContext('2d')
.drawImage(img, 0,0);
};
init().catch( console.error );
canvas {
border: 1px solid black;
background: black;
}
<canvas></canvas>
Now that we have a clear source ready to use, all our we have to do in the animation code is to put these pixels, without any heavy computation:
// older browsers version
function makeCircleImage(radius, src, callback) {
var canvas = document.createElement('canvas');
canvas.width = canvas.height = radius * 2;
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// we use compositing, offers better antialiasing than clip()
ctx.globalCompositeOperation = 'destination-in';
ctx.arc(radius, radius, radius, 0, Math.PI*2);
ctx.fill();
callback(canvas);
};
}
function Circle( x, y, radius ) {
//Give var for circle
this.x = x;
this.y = y;
this.dx = 1;
this.dy = 1;
this.radius = radius;
}
// use prototyping if you wish to make it a class
Circle.prototype = {
//Draw circle on canvas
draw: function () {
var
x = (this.x - this.radius),
y = (this.y - this.radius);
// draw is a single call
c.drawImage( this.image, x, y );
},
update: function () {
var
max_right = canvas.width + this.radius,
max_left = this.radius * -1;
this.x += this.dx;
if( this.x > max_right ) {
this.x += max_right - this.x;
this.dx *= -1;
}
if( this.x < max_left ) {
this.x += max_left - this.x;
this.dx *= -1;
}
},
init: function(callback) {
var url = "https://assets.coingecko.com/coins/images/2607/large/molecular_future.png?1547036754";
makeCircleImage( this.radius, url, function(img) {
this.image = img;
callback();
}.bind(this));
}
};
//Animate canvas
function animate() {
c.clearRect(0, 0, window.innerWidth, window.innerHeight);
circles.forEach(function( circle ) {
circle.update();
});
circles.forEach(function( circle ) {
circle.draw();
});
requestAnimationFrame(animate);
}
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var circles = [
new Circle(10, 100, 50),
new Circle(10, 200, 30),
new Circle(10, 300, 50)
];
var ready = 0;
circles.forEach(function(circle) {
circle.init(oncircledone);
});
function oncircledone() {
if(++ready === circles.length) {
animate()
}
}
canvas {
border: 1px solid black;
background: black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas></canvas>
</body>
</html>
And for newest browsers:
// newest browsers version
function makeCircleImage( radius, src ) {
return new Promise( (resolve, reject) => {
// this canvas will get Garbage Collected
const canvas = document.createElement( 'canvas' );
canvas.width = canvas.height = radius * 2;
const ctx = canvas.getContext( "2d" );
const img = new Image();
img.src = src;
img.onload = function() {
ctx.drawImage( img, 0, 0, canvas.width, canvas.height );
// we use compositing, offers better antialiasing than clip()
ctx.globalCompositeOperation = 'destination-in';
ctx.arc( radius, radius, radius, 0, Math.PI*2 );
ctx.fill();
resolve( createImageBitmap( canvas ) );
};
img.onerror = reject;
});
}
class Circle {
constructor( x, y, radius ) {
this.x = x;
this.y = y;
this.dx = 1;
this.dy = 1;
this.radius = radius;
}
draw() {
const x = (this.x - this.radius);
const y = (this.y - this.radius);
c.drawImage( this.image, x, y );
}
update() {
const max_right = canvas.width + this.radius;
const max_left = this.radius * -1;
this.x += this.dx;
if( this.x > max_right ) {
this.x += max_right - this.x;
this.dx *= -1;
}
if( this.x < max_left ) {
this.x += max_left - this.x;
this.dx *= -1;
}
}
async init() {
const url = "https://assets.coingecko.com/coins/images/2607/large/molecular_future.png?1547036754";
this.image = await makeCircleImage( this.radius, url );
}
}
//Animate canvas
function animate() {
c.clearRect(0, 0, window.innerWidth, window.innerHeight);
circles.forEach( (circle) => circle.update() );
circles.forEach( (circle) => circle.draw() );
requestAnimationFrame(animate);
}
const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const circles = [
new Circle(10, 50, 50),
new Circle(10, 150, 30),
new Circle(450, 250, 80)
];
Promise.all(circles.map( (circle) => circle.init() ))
.then(animate)
.catch(console.error);
canvas {
border: 1px solid black;
background: black;
}
<canvas></canvas>
But if you are going to have a lot of Circle instances and that they will only differ in their radius, but share the same original image's source, then you might prefer to store a single high quality version of the composed image and just rescale it in each instance's draw call.
// newest browsers version
function makeCircleImage( radius, src ) {
return new Promise( (resolve, reject) => {
// this canvas will get Garbage Collected
const canvas = document.createElement( 'canvas' );
canvas.width = canvas.height = radius * 2;
const ctx = canvas.getContext( "2d" );
const img = new Image();
img.src = src;
img.onload = function() {
ctx.drawImage( img, 0, 0, canvas.width, canvas.height );
// we use compositing, offers better antialiasing than clip()
ctx.globalCompositeOperation = 'destination-in';
ctx.arc( radius, radius, radius, 0, Math.PI*2 );
ctx.fill();
resolve( createImageBitmap( canvas ) );
};
img.onerror = reject;
});
}
(async () => {
const url = "https://assets.coingecko.com/coins/images/2607/large/molecular_future.png?1547036754";
const image = await makeCircleImage(250, url); // original size of the png image
class Circle {
constructor( x, y, radius ) {
this.x = x;
this.y = y;
this.dx = 1;
this.dy = 1;
this.radius = radius;
}
draw() {
const x = (this.x - this.radius);
const y = (this.y - this.radius);
// now they all use the same image
// with a bit more computation though due to resizing
c.drawImage( image, x, y , this.radius * 2, this.radius * 2);
}
update() {
const max_right = canvas.width + this.radius;
const max_left = this.radius * -1;
this.x += this.dx;
if( this.x > max_right ) {
this.x += max_right - this.x;
this.dx *= -1;
}
if( this.x < max_left ) {
this.x += max_left - this.x;
this.dx *= -1;
}
}
}
//Animate canvas
function animate() {
c.clearRect(0, 0, window.innerWidth, window.innerHeight);
circles.forEach( (circle) => circle.update() );
circles.forEach( (circle) => circle.draw() );
requestAnimationFrame(animate);
}
const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const rand = (n) => Math.random() * n;
const circles = Array.from({ length: 50 })
.map( () =>
new Circle(
rand(canvas.width),
rand(canvas.height),
rand(125)
)
);
animate();
})()
.catch(console.error);
canvas {
border: 1px solid black;
background: black;
}
<canvas></canvas>

Javascript canvas path not rendering

I'm new to canvas and I'm trying to create a small game. I'm trying to render some shapes on the screen but for some reason the shapes don't appear. The methods are being called and shapes get added to the array but nothing renders on the screen.
const canvas = document.getElementsByClassName('gameContainer');
const context = canvas[0].getContext('2d');
let canvasWidth = window.innerWidth;
let canvasHeight = window.innerHeight;
let shapes = [];
class Shape {
constructor(x, y, rad) {
this.x = x;
this.y = y;
this.rad = rad;
}
createShape() {
context.beginPath();
context.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
context.fillStyle = '#000';
context.fill();
}
}
class CanvasState {
constructor() {
this.canvas = canvas[0];
this.canvas.height = canvasHeight;
this.canvas.width = canvasWidth;
this.shapes = shapes;
}
addShape() {
setInterval(function() {
const randomRad = randomNum(10, 100);
const shape = new Shape(randomNum(randomRad, canvasWidth - randomRad), -randomRad, randomRad);
shape.createShape(this.context);
shapes.push(shape);
}, 1000);
}
}
function randomNum(min, max) {
Math.round(Math.random() * (max - min) + min);
}
function init() {
const cvs = new CanvasState();
cvs.addShape();
}
window.onload = function() {
init();
}
Any help given is greatly appreciated, thanks!

Assuming you have a working implementation of randomNum, the following lines result in the y-coordinate always being negative:
const randomRad = randomNum(10, 100);
const shape = new Shape(randomNum(randomRad, canvasWidth - randomRad), -randomRad, randomRad);
So all the shapes get drawn off screen.

Picture background for canvas particle

I'm trying to create background for every created particle.
Canvas pattern is not working properly. I'm getting this error >> "SyntaxError: An invalid or illegal string was specified"
HTML
<canvas id="canvas"></canvas>
JS
(function(){
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'),
particles = {},
particleIndex = 0,
particleNum = 1;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.width);
function Particle(){
this.x = canvas.width / 2;
this.y = 0;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = 0.2;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.test = 0;
this.maxLife = 100;
}
Particle.prototype.draw = function(){
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.test++;
if ( this.test >= this.maxLife ) {
delete particles[this.id];
};
var img = new Image();
img.src = 'img/aaa.png';
var pattern = ctx.createPattern(img,'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(this.x, this.y, 20, 20);
};
setInterval(function(){
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++) {
new Particle();
};
for(var i in particles) {
particles[i].draw();
}
},30)
}})();
I was trying to do this also with ctx.drawImage(), but picture was displayed one time only.
Any tips?:)
Fiddle

I think the issue is the image being loaded later than its used.
Inside your draw() you have:
var img = new Image();
img.src = 'img/aaa.png';
var pattern = ctx.createPattern(img,20,20);
It is a bad idea to create new images everytime you want to draw. I strongly suggest you create the img variable outside of the draw loop. Once you set the .src of an image, you have to wait until it is loaded to use it. There is an onload event you can use to let you know when its ready.
Here is an example:
var imgLoaded = false;
var img = new Image();
img.src = 'img/aaa.png';
img.onload = function() { imgLoaded = true; };
function draw() {
...
if (imgLoaded) {
var pattern = ctx.createPattern(img, 'repeat');
...
}
...
}