Develop Reference

How to draw an isometric 3D cube with 3 perfectly identical faces with fillRect?

I would like to create an isometric 3D cube with fillRect whose 3 faces have the same dimensions as the image below:
Edit: I want to do it with fillRect. The reason for this is that I will draw images on the 3 faces of the cube afterwards. This will be very easy to do since I will use exactly the same transformations as for drawing the faces.
Edit 2: I didn't specify that I want to avoid using an external library so that the code is as optimized as possible. I know that it is possible to calculate the 3 matrices beforehand to draw the 3 faces and make a perfect isometric cube.
Edit 3: As my example code showed, I want to be able to set the size of the side of the isometric cube on the fly (const faceSize = 150).
I have a beginning of code but I have several problems:
The faces are not all the same dimensions
I don't know how to draw the top face
const faceSize = 150;
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// Top Face (not big enough)
ctx.save();
ctx.translate(centerX, centerY);
ctx.scale(1, .5);
ctx.rotate(-45 * Math.PI / 180);
ctx.fillStyle = 'yellow';
ctx.fillRect(0, -faceSize, faceSize, faceSize);
ctx.restore();
// Left Face (not high enough)
ctx.save();
ctx.translate(centerX, centerY);
ctx.transform(1, .5, 0, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(-faceSize, 0, faceSize, faceSize);
ctx.restore();
// Right Face (not high enough)
ctx.save();
ctx.translate(centerX, centerY);
ctx.transform(1, -.5, 0, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, faceSize, faceSize);
ctx.restore();
<canvas width="400" height="400"></canvas>

I used a large part of #enhzflep's code which I adapted so that the width of the cube is dynamically changeable.
All the code seems mathematically correct, I just have a doubt about the value 1.22 given as a parameter to scaleSelf. Why was this precise value chosen?
Here is the code:
window.addEventListener('load', onLoad, false);
const canvas = document.createElement('canvas');
function onLoad() {
//canvas.width = cubeWidth;
//canvas.height = faceSize * 2;
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
drawCube(canvas);
}
function drawCube() {
const scale = Math.abs(Math.sin(Date.now() / 1000) * canvas.width / 200); // scale effect
const faceSize = 100 * scale;
const radians = 30 * Math.PI / 180;
const cubeWidth = faceSize * Math.cos(radians) * 2;
const centerPosition = {
x: canvas.width / 2,
y: canvas.height / 2
};
const ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const defaultMat = [1, 0, 0, 1, 0, 0];
// Left (red) side
const leftMat = new DOMMatrix(defaultMat);
leftMat.translateSelf(centerPosition.x - cubeWidth / 2, centerPosition.y - faceSize / 2);
leftMat.skewYSelf(30);
ctx.setTransform(leftMat);
ctx.fillStyle = '#F00';
ctx.fillRect(0, 0, cubeWidth / 2, faceSize);
// Right (blue) side
const rightMat = new DOMMatrix(defaultMat);
rightMat.translateSelf(centerPosition.x, centerPosition.y);
rightMat.skewYSelf(-30);
ctx.setTransform(rightMat);
ctx.fillStyle = '#00F';
ctx.fillRect(0, 0, cubeWidth / 2, faceSize);
// Top (yellow) side
const topMat = new DOMMatrix(defaultMat);
const toOriginMat = new DOMMatrix(defaultMat);
const fromOriginMat = new DOMMatrix(defaultMat);
const rotMat = new DOMMatrix(defaultMat);
const scaleMat = new DOMMatrix(defaultMat);
toOriginMat.translateSelf(-faceSize / 2, -faceSize / 2);
fromOriginMat.translateSelf(centerPosition.x, centerPosition.y - faceSize / 2);
rotMat.rotateSelf(0, 0, -45);
scaleMat.scaleSelf(1.22, (faceSize / cubeWidth) * 1.22);
topMat.preMultiplySelf(toOriginMat);
topMat.preMultiplySelf(rotMat);
topMat.preMultiplySelf(scaleMat);
topMat.preMultiplySelf(fromOriginMat);
ctx.setTransform(topMat);
ctx.fillStyle = '#FF0';
ctx.fillRect(0, 0, faceSize, faceSize);
ctx.restore();
requestAnimationFrame(drawCube);
}

Here's a quick n dirty approach to the problem. It's too hot here for me to really think very clearly about this question. (I struggle with matrix maths too)
There's 2 things I think worth mentioning, each of which has an effect on the scaling operation.
width and height of the finished figure (and your posted example image) are different.
I think it's the ratio of the distance between (opposite) corners of the untransformed rectangle which fills 1/4 of the canvas, and the finished yellow side which affect the scaling.
Also, note that I'm drawing a square of canvas.height/2 sidelength for the yellow side, whereas I was drawing a rectangle for the red and blue sides.
In the scaling section, width/4 and height/4 are both shorthand for (width/2)/2 and (height/2)/2. width/2 and height/2 give you a rectangle filling 1/2 of the canvas, with a centre (middle of the square) located at (width/2)/2, (height/2)/2 - height/4 means something different in the translation section (even though it's the same number)
With that said, here's the sort of thing I was talking about earlier.
"use strict";
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
let width = 147;
let height = 171;
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
drawIsoDemo(canvas);
}
function drawIsoDemo(destCanvas)
{
let ctx = destCanvas.getContext('2d');
let width = destCanvas.width;
let height = destCanvas.height;
ctx.fillStyle = '#000';
ctx.fillRect(0,0,width,height);
var idMatVars = [1,0, 0,1, 0,0];
// left (red) side
let leftMat = new DOMMatrix( idMatVars );
leftMat.translateSelf( 0, 0.25*height );
leftMat.skewYSelf(30);
ctx.save();
ctx.transform( leftMat.a, leftMat.b, leftMat.c, leftMat.d, leftMat.e, leftMat.f);
ctx.fillStyle = '#F00';
ctx.fillRect(0,0,width/2,height/2);
ctx.restore();
// right (blue) side
let rightMat = new DOMMatrix( idMatVars );
rightMat.translateSelf( 0.5*width, 0.5*height );
rightMat.skewYSelf(-30);
ctx.save();
ctx.transform( rightMat.a, rightMat.b, rightMat.c, rightMat.d, rightMat.e, rightMat.f);
ctx.fillStyle = '#00F';
ctx.fillRect(0,0,width/2,height/2);
ctx.restore();
// top (yellow) side
let topMat = new DOMMatrix( idMatVars );
let toOriginMat = new DOMMatrix( idMatVars );
let fromOriginMat = new DOMMatrix(idMatVars);
let rotMat = new DOMMatrix(idMatVars);
let scaleMat = new DOMMatrix(idMatVars);
toOriginMat.translateSelf(-height/4, -height/4);
fromOriginMat.translateSelf(width/2,height/4);
rotMat.rotateSelf(0,0,-45);
scaleMat.scaleSelf(1.22,((height/2)/width)*1.22);
topMat.preMultiplySelf(toOriginMat);
topMat.preMultiplySelf(rotMat);
topMat.preMultiplySelf(scaleMat);
topMat.preMultiplySelf(fromOriginMat);
ctx.save();
ctx.transform( topMat.a, topMat.b, topMat.c, topMat.d, topMat.e, topMat.f);
ctx.fillStyle = '#FF0';
ctx.fillRect(0,0,height/2,height/2);
ctx.restore();
}

If we overlay a circle on your isometric cube, we can see that the outer vertices are spaced equally apart. In fact it's always 60°, which is no wonder as it's a hexagon.
So all we have to do is obtaining the coordinates for the outer vertices. This is quite easy as we can make a further assumption: if you look at the shape again, you'll notice that the length of each of the cube's sides seems to be the radius of the circle.
With the help of a little trigonometry and a for-loop which increments by 60 degrees, we can put calculate and put all those vertices into an array and finally connect those vertices to draw the cube.
Here's an example:
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
function drawCube(x, y, sideLength) {
let vertices = [new Point(x, y)];
for (let a = 0; a < 6; a++) {
vertices.push(new Point(x + Math.cos(((a * 60) - 30) * Math.PI / 180) * sideLength, y + Math.sin(((a * 60) - 30) * Math.PI / 180) * sideLength));
}
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
ctx.lineTo(vertices[5].x, vertices[5].y);
ctx.lineTo(vertices[6].x, vertices[6].y);
ctx.lineTo(vertices[1].x, vertices[1].y);
ctx.lineTo(vertices[0].x, vertices[0].y);
ctx.fill();
ctx.fillStyle = "#a0a0a0";
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
ctx.lineTo(vertices[1].x, vertices[1].y);
ctx.lineTo(vertices[2].x, vertices[2].y);
ctx.lineTo(vertices[3].x, vertices[3].y);
ctx.lineTo(vertices[0].x, vertices[0].y);
ctx.fill();
ctx.fillStyle = "#efefef";
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
ctx.lineTo(vertices[3].x, vertices[3].y);
ctx.lineTo(vertices[4].x, vertices[4].y);
ctx.lineTo(vertices[5].x, vertices[5].y);
ctx.lineTo(vertices[0].x, vertices[0].y);
ctx.fill();
}
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
drawCube(200, 150, 85);
canvas {
background: #401fc1;
}
<canvas id="canvas" width="400" height="300"></canvas>
EDIT
What you want to achieve is ain't that easily simply because the CanvasRenderingContext2D API actually does not offer a skewing/shearing transform.
Nevertheless with the help of a third-party library we're able to transform the three sides in an orthographic way. It's called perspective.js
Still we need to calculate the outer vertices but instead of using the moveTo/lineTo commands, we forward the coordinates to perspective.js to actually do the perspective distortion of some source images.
Here's another example:
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
function drawCube(x, y, sideLength) {
let vertices = [new Point(x, y)];
for (let a = 0; a < 6; a++) {
vertices.push(new Point(x + Math.cos(((a * 60) - 30) * Math.PI / 180) * sideLength, y + Math.sin(((a * 60) - 30) * Math.PI / 180) * sideLength));
}
let p = new Perspective(ctx, images[0]);
p.draw([
[vertices[5].x, vertices[5].y],
[vertices[6].x, vertices[6].y],
[vertices[1].x, vertices[1].y],
[vertices[0].x, vertices[0].y]
]);
p = new Perspective(ctx, images[1]);
p.draw([
[vertices[0].x, vertices[0].y],
[vertices[1].x, vertices[1].y],
[vertices[2].x, vertices[2].y],
[vertices[3].x, vertices[3].y]
]);
p = new Perspective(ctx, images[2]);
p.draw([
[vertices[4].x, vertices[4].y],
[vertices[5].x, vertices[5].y],
[vertices[0].x, vertices[0].y],
[vertices[3].x, vertices[3].y]
]);
}
function loadImages(index) {
let image = new Image();
image.onload = function(e) {
images.push(e.target);
if (index + 1 < sources.length) {
loadImages(index + 1);
} else {
drawCube(200, 150, 125, e.target);
}
}
image.src = sources[index];
}
let sources = ["https://picsum.photos/id/1079/200/300", "https://picsum.photos/id/76/200/300", "https://picsum.photos/id/79/200/300"];
let images = [];
loadImages(0);
canvas {
background: #401fc1;
}
<script src="https://cdn.rawgit.com/wanadev/perspective.js/master/dist/perspective.min.js"></script>
<canvas id="canvas" width="400" height="300"></canvas>

Add color filter to black and white image with js?

Is it possible to add a color filter to a black and white image?
So for example, lets say I want to use this image as a particle in a game:particle image
Is it possible for me to draw this image with some sort of filter so it can become whatever color i'd like?
Similar to how you can color in a rectangle with whatever color you want:
ctx.fillstyle = "rgb(255, 0, 0)";
ctx.fillrect(0, 0, 100, 100);
is there any way for me to dynamically add a color filter over an image in this way?
(I only want to apply the color to the image not the whole canvas)

You can use your image as a mask. Use ctx.globalCompositeOperation after drawing the mask with "source-in" when you draw the background to "cut" after mask. And "destination-in" if your mask is drawn after the background.
let color = 'rgb(255, 0, 0)';
let image = new Image();
image.src = 'https://i.stack.imgur.com/XFpL3.png';
image.onload = () => {
let canvas = document.createElement('canvas');
let w = canvas.width = image.width;
let h = canvas.height = image.height;
let ctx = canvas.getContext('2d');
ctx.fillStyle = color;
ctx.drawImage(image,0,0);
ctx.globalCompositeOperation = 'source-in';
ctx.fillRect(0,0,w,h);
document.body.append(canvas);
}

Updated
I miss read the question and gave an answer that may not suit your needs. Thus this update demonstrates how to color BW images for particle FX.
Unfortunately the 2D API is not designed with game rendering in mind and for the best results you would implement the rendering via WebGL giving you a huge variety of FX and a massive performance gain. However WebGL requires a lot of code and a good understanding of shaders.
NOTE the image you provided is black. When coloring a black and white image the black will still be black. I will thus assume the image you want colored is white. I will be using a copy of your image that has set the Alpha range from 0 - 255 and the RGB have a circular gradient from black to white.
Sprites
In the game world an image rendered to the display is called a sprite. A sprite is a rectangular image, It has 4 channels RGBA and can be drawn at any position, rotation, scale, and fade (Alpha)
An example of a basic sprite rendering solution using the 2D API.
To color individual sprites you have two options.
Option 1 ctx.filter
You could use the ctx.filter property and create a custom filter to color sprites.
However this is not optimal as filters are rather slow when compared to alternative solutions.
Option 2 Split Channels
To draw a sprite in any color you will need to split the image into its red green blue and alpha parts. Then you render each channel depending on the color you want it to display.
To avoid security limits you can split the image using the following functions
Copy image
Creates a copy of the image as a canvas
function copyImage(img) { // img can be any image type
const can = Object.assign(document.createElement("canvas"), {
width: img.width,
height: img.height,
});
can.ctx = can.getContext("2d");
can.ctx.drawImage(img, 0, 0, img.width, img.height);
return can;
}
Filter channel
This will copy an image and remove two or three RGBA color channels. It requires the function copyImage.
function imageFilterChannel(img, channel = "red") {
const imgf = copyImage(img);
// remove unwanted channel data
imgf.ctx.globalCompositeOperation = "multiply";
imgf.ctx.fillStyle = imageFilterChannel.filters[channel] ?? "#FFF";
imgf.ctx.fillRect(0,0, img.width, img.height);
// add alpha mask
imgf.ctx.globalCompositeOperation = "destination-in";
imgf.ctx.drawImage(img, 0, 0, img.width, img.height);
imgf.ctx.globalCompositeOperation = "source-over";
return imgf;
}
imageFilterChannel.filters = {
red: "#F00",
green: "#0F0",
blue: "#00F",
alpha: "#000",
};
Colored sprite
This function will load an image, create the 4 separate channel images and encapsulate it in a sprite object.
It requires the function imageFilterChannel.
NOTE there is no error checking
function createColorSprite(srcUrl) {
var W, H;
const img = new Image;
img.src = srcUrl;
const channels = [];
img.addEventListener("load",() => {
channels[0] = imageFilterChannel(img, "red");
channels[1] = imageFilterChannel(img, "green");
channels[2] = imageFilterChannel(img, "blue");
channels[3] = imageFilterChannel(img, "alpha");
API.width = W = img.width;
API.height = H = img.height;
API.ready = true;
}, {once: true});
const API = {
ready: false,
drawColored(ctx, x, y, scale, rot, color) { // color is CSS hex color #RRGGBBAA
// eg #FFFFFFFF
// get RGBA from color string
const r = parseInt(color[1] + color[2], 16);
const g = parseInt(color[3] + color[4], 16);
const b = parseInt(color[5] + color[6], 16);
const a = parseInt(color[7] + color[8], 16);
// Setup location and transformation
const ax = Math.cos(rot) * scale;
const ay = Math.sin(rot) * scale;
ctx.setTransform(ax, ay, -ay, ax, x, y);
const offX = -W / 2;
const offY = -H / 2;
// draw alpha first then RGB
ctx.globalCompositeOperation = "source-over";
ctx.globalAlpha = a / 255;
ctx.drawImage(channels[3], offX, offY, W, H);
ctx.globalCompositeOperation = "lighter";
ctx.globalAlpha = r / 255;
ctx.drawImage(channels[0], offX, offY, W, H);
ctx.globalAlpha = g / 255;
ctx.drawImage(channels[1], offX, offY, W, H);
ctx.globalAlpha = b / 255;
ctx.drawImage(channels[2], offX, offY, W, H);
ctx.globalCompositeOperation = "source-over";
}
};
return API;
}
Used as follows
// to load
const image = createColorSprite("https://i.stack.imgur.com/RXAVJ.png");
// to render with red
if (image.ready) { image.drawColored(ctx, 100, 100, 1, 0, "#FF0000FF") }
DEMO
Using the functions above the demo shows how to use them and will give you some feedback in regards to the performance. It uses some of the code from the sprite example linked above.
Demo renders 200 images.
Note that there is some room for performance gains.
Don`t render channel image if that channel is zero
Don's use CSS color string, use an array of unit colors, saves the need to parse CSS color string. eg RGBA red as [1,0,0,1]
Use images that closely match the size they will be displayed, The images in the demo are many times larger than they are displayed.
function copyImage(img) { // img can be any image type
const can = Object.assign(document.createElement("canvas"), {
width: img.width,
height: img.height,
});
can.ctx = can.getContext("2d");
can.ctx.drawImage(img, 0, 0, img.width, img.height);
return can;
}
function imageFilterChannel(img, channel = "red") {
const imgf = copyImage(img);
// remove unwanted channel data
imgf.ctx.globalCompositeOperation = "multiply";
imgf.ctx.fillStyle = imageFilterChannel.filters[channel] ?? "#FFF";
imgf.ctx.fillRect(0,0, img.width, img.height);
// add alpha mask
imgf.ctx.globalCompositeOperation = "destination-in";
imgf.ctx.drawImage(img, 0, 0, img.width, img.height);
imgf.ctx.globalCompositeOperation = "source-over";
return imgf;
}
imageFilterChannel.filters = {
red: "#F00",
green: "#0F0",
blue: "#00F",
alpha: "#000",
};
function createColorSprite(srcUrl) {
var W, H;
const img = new Image;
img.src = srcUrl;
const channels = [];
img.addEventListener("load",() => {
channels[0] = imageFilterChannel(img, "red");
channels[1] = imageFilterChannel(img, "green");
channels[2] = imageFilterChannel(img, "blue");
channels[3] = imageFilterChannel(img, "alpha");
API.width = W = img.width;
API.height = H = img.height;
API.ready = true;
}, {once: true});
const API = {
ready: false,
drawColored(ctx, x, y, scale, rot, color) { // color is CSS hex color #RRGGBBAA
// eg #FFFFFFFF
// get RGBA from color string
const r = parseInt(color[1] + color[2], 16);
const g = parseInt(color[3] + color[4], 16);
const b = parseInt(color[5] + color[6], 16);
const a = parseInt(color[7] + color[8], 16);
// Setup location and transformation
const ax = Math.cos(rot) * scale;
const ay = Math.sin(rot) * scale;
ctx.setTransform(ax, ay, -ay, ax, x, y);
const offX = -W / 2;
const offY = -H / 2;
// draw alpha first then RGB
ctx.globalCompositeOperation = "source-over";
ctx.globalAlpha = a / 255;
ctx.drawImage(channels[3], offX, offY, W, H);
ctx.globalCompositeOperation = "lighter";
ctx.globalAlpha = r / 255;
ctx.drawImage(channels[0], offX, offY, W, H);
ctx.globalAlpha = g / 255;
ctx.drawImage(channels[1], offX, offY, W, H);
ctx.globalAlpha = b / 255;
ctx.drawImage(channels[2], offX, offY, W, H);
ctx.globalCompositeOperation = "source-over";
}
};
return API;
}
var image = createColorSprite("https://i.stack.imgur.com/C7qq2.png?s=328&g=1");
var image1 = createColorSprite("https://i.stack.imgur.com/RXAVJ.png");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
document.body.appendChild(canvas);
var w,h;
function resize(){ w = canvas.width = innerWidth; h = canvas.height = innerHeight;}
resize();
addEventListener("resize",resize);
function rand(min,max){return Math.random() * (max ?(max-min) : min) + (max ? min : 0) }
const randHex = () => (Math.random() * 255 | 0).toString(16).padStart(2,"0");
const randColRGB = () => "#" + randHex() + randHex() + randHex() + "FF";
function DO(count,callback){ while (count--) { callback(count) } }
const sprites = [];
DO(200,(i)=>{
sprites.push({
x : rand(w), y : rand(h),
xr : 0, yr : 0, // actual position of sprite
r : rand(Math.PI * 2),
scale: rand(0.1,0.25),
dx: rand(-2,2), dy : rand(-2,2),
dr: rand(-0.2,0.2),
color: randColRGB(),
img: i%2 ? image : image1,
});
});
function update(){
var ihM,iwM;
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,w,h);
if(image.ready && image1.ready){
for(var i = 0; i < sprites.length; i ++){
var spr = sprites[i];
iw = spr.img.width;
ih = spr.img.height;
spr.x += spr.dx;
spr.y += spr.dy;
spr.r += spr.dr;
iwM = iw * spr.scale * 2 + w;
ihM = ih * spr.scale * 2 + h;
spr.xr = ((spr.x % iwM) + iwM) % iwM - iw * spr.scale;
spr.yr = ((spr.y % ihM) + ihM) % ihM - ih * spr.scale;
spr.img.drawColored(ctx, spr.xr, spr.yr, spr.scale, spr.r, spr.color);
}
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);
Old answer
Adding color FXs
After the image is drawn set either ctx.globalCompositeOperation = "color", or ctx.globalCompositeOperation = "hue" and draw over the image in the color you want.
Example
ctx.drawImage(img, 0, 0, 50, 50); // draw image. Ensure that the current
// composite op is
// "source-over" see last line
ctx.globalCompositeOperation = "color"; // set the comp op (can also use "hue")
ctx.fillStyle = "red"; // set fillstyle to color you want
ctx.fillRect(0,0,50,50); // draw red over image
ctx.globalCompositeOperation = "source-over";// restore default comp op
For more info see MDN Global Composite Operations

You can try positioning a layer over the image with a partially transparent background:
.container{
position:relative;
width:fit-content;
}
.layer{
position:absolute;
height:100%;
width:100%;
background-color:rgb(0, 98, 255, 0.5);
z-index:1;
}
<div class="container">
<div class="layer"></div>
<img src="https://i.stack.imgur.com/XFpL3.png">
</div>

How to resize my canvas to fit the same content no matter the size

I am creating a game concept with this code: https://pastebin.com/pMNR1CfH. However, depending on the size of the window, more or less of the objects on screen will be shown. How can I resize it so the view remains the same?
I have these variables to try and scale the canvas, but I don't know where to place the canvas.scale function.
var scalewidth = window.innerWidth / 1920;
var scaleheight = window.innerHeight / 969;
thank you

I'll assume that you want to:
keep the aspect ratio of the graphics in tact (a circle should not be displayed as ellipse)
completely visualise the area (0,0)-(1920,969) being used to make the drawing
centre the graphics when there is spare room in one of the two dimensions of the view port.
Here is how you can do that:
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
window.addEventListener('resize', draw);
function draw() {
// Get current
let viewSizes = [canvas.width = window.innerWidth, canvas.height = window.innerHeight];
// Reset the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transformation
ctx.clearRect(0, 0, ...viewSizes); // wipe
// Determine scale factor
let worldSizes = [1920, 969];
let scales = worldSizes.map((worldSize, i) => viewSizes[i] / worldSize);
let minScale = Math.min(...scales);
// Determine shift in order to center the content
let shift = scales.map((scale, i) => (viewSizes[i] - minScale * worldSizes[i]) / 2);
ctx.setTransform(minScale, 0, 0, minScale, ...shift);
// Draw the contents using world coordinates (0,0)-(1920,969): This is demo
ctx.beginPath();
ctx.arc(960, 485, 484, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.rect(10, 455, 1900, 60);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
}
draw();
body { margin: 0; overflow: hidden }
<canvas></canvas>

Filling in two colors while using the rect() method

I was trying to make two different shapes that are different colors but it isn't working. Both of the shapes are the same colors. Please help!(Please note that I am not the best coder in the world)
I've looked for other examples on this website, but all of them use the lineTo() method and I would like to use the rect() method just to make things easier.
//make canvas and set it up
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.style.position = 'absolute';
canvas.style.left = '0px';
canvas.style.top = '0px';
canvas.style.backgroundColor = '#D0C6C6';
var cH = canvas.height;
var cW = canvas.width;
//draw paddles
//variables
var paddleLength = 120;
var redPaddleY = window.innerHeight / 2;
var bluePaddleY = window.innerHeight / 2;
var paddleWidth = 20;
//drawing starts
function drawPaddles() {
//RED PADDLE
var redPaddle = function(color) {
ctx.fillStyle = color;
ctx.clearRect(0, 0, cW, cH);
ctx.rect(cH / 12, redPaddleY - paddleLength / 2, paddleWidth, paddleLength);
ctx.fill();
};
//BLUE PADDLE
var bluePaddle = function(color) {
ctx.fillStyle = color;
ctx.clearRect(0, 0, cW, cH);
ctx.rect(cH / 12 * 14, bluePaddleY - paddleLength / 2, paddleWidth, paddleLength);
ctx.fill();
};
redPaddle('red');
bluePaddle('blue');
};
var interval = setInterval(drawPaddles, 25);

Whenever you add a shape to the canvas it becomes part of the current path. The current path remains open until you tell the canvas to start a new one with beginPath(). This means that when you add your second rect() it is combined with the first and filled with the same colour.
The simplest fix would be to use the fillRect() function instead of rect which begins, closes and fills a path in one call.
var redPaddle = function(color) {
ctx.fillStyle = color;
ctx.fillRect(cH / 12, redPaddleY - paddleLength / 2, paddleWidth, paddleLength);
};
If you still want to use rect() you should tell the canvas to begin a new path for each paddle.
var redPaddle = function(color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.rect(cH / 12, redPaddleY - paddleLength / 2, paddleWidth, paddleLength);
ctx.fill();
};
I would also suggest moving the clearRect() outside of the drawing functions too. Clear once per frame and draw both paddles.
...
ctx.clearRect(0, 0, cW, cH);
redPaddle();
bluePaddle();
...
You should also investigate requestAnimationFrame() to do your animation loop as it provides many performance improvements over intervals.

canvas hole in html5 with image not working

I am trying to create a hole in canvas; and loading image in canvas after.
I want this canvas to contain a hole at a top layer.
I just read about counter-clockwise canvas rules and then created hole with counter clockwise position as below-
var c = document.getElementById("canvas-front");
var ctx = c.getContext("2d");
var centerX = c.width / 2;
var centerY = c.offsetTop;
var radius = 30;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI,true);//boolean true to counter-clockwise
ctx.fillStyle = 'black';
ctx.fill();
I have canvas before image in it-
After applying image in this canvas-
Canvas-
<canvas id="canvas-front" width="261" height="506"></canvas>
As you can see from both the images, I can't get this hole in canvas work.
How do I create this arc so that image doesn't overlap this.

I get this issue solved-
What I had to do-
On change of file I did empty to canvas and redrew image and then while image is being loaded
the arc is being created to counter-clockwise position-
Drawing the canvas again on image change-
var canvas = document.getElementById("canvas-front");
canvas.width = canvas.width;//blanks the canvas
var c = canvas.getContext("2d");
Creating image and giving it required src from changed input-
var img = new Image();
img.src = e.target.result;
Loading image and creating arc parallely-
img.onload = function () {
c.drawImage(img, 0, 0);
var centerX = canvas.width / 2;
var centerY = canvas.offsetTop;
var radius = 30;
c.beginPath();
c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
c.fillStyle = 'black';
c.fill();
}