I've recently trying to make a world map game using tiles, so, I want the images to have different colors, for example, a tile to be as the color of the country. So, the globalCompositeOperation applies the same color to all the images, what did I do wrong? I think that the problem is in the fillRect(0, 0, Canvas.width, Canvas.height), because it would be the size of the canvas and it would apply to all images, but I think that with making the square the size of the image it won't be useful because there's parts of the border that would collide with that box.
By the way, here's the code:
var Canvas = document.getElementById("MainCanvas");
var Context = Canvas.getContext("2d");
var Tiles = [
{
Name: "Gibraltar",
x: 8990,
y: 5020,
width: 10,
height: 10,
Image: "https://piskel-imgstore-b.appspot.com/img/41fbbcc7-abfe-11eb-8bc6-5f48ab91e43b.gif",
BorderImage: "https://piskel-imgstore-b.appspot.com/img/77d149a8-abfe-11eb-8aaa-5f48ab91e43b.gif"
},
{
Name: "Cádiz",
x: 8950,
y: 4960,
width: 100,
height: 120,
Image: "https://piskel-imgstore-b.appspot.com/img/a7c79a9c-abfe-11eb-b096-5f48ab91e43b.gif",
BorderImage: "https://piskel-imgstore-b.appspot.com/img/efa2e1b3-abfe-11eb-8589-5f48ab91e43b.gif"
}
];
var Camera = {
x: 0,
y: 0,
Zoom: 100
};
function Start()
{
setInterval(Update, 10);
}
function Update()
{
Render();
}
function Render()
{
Context.clearRect(0, 0, Canvas.width, Canvas.height);
Canvas.width = Camera.Zoom * 10;
Canvas.height = Camera.Zoom * 5.62;
for(let i = 0; i != Tiles.length; i++)
{
DrawImage(i * 300 + 300, 200, Tiles[i].width + 20, Tiles[i].height + 20, 0, "#000000", Tiles[i].BorderImage);
DrawImage(i * 300 + 300, 200, Tiles[i].width, Tiles[i].height, 0, "#ff0000", Tiles[i].Image);
}
}
//Drawing Functions
function DrawImage(x, y, width, height, angle, color, imgsrc)
{
let CurrentImage = new Image();
CurrentImage.src = imgsrc;
Context.save();
Context.translate(x, y);
Context.rotate(angle);
Context.drawImage(CurrentImage, width / -2, height / -2, width, height);
Context.restore();
Context.globalCompositeOperation = "source-in";
Context.fillStyle = color;
Context.fillRect(0, 0, Canvas.width, Canvas.height);
Context.globalCompositeOperation = "source-over";
}
//Start Button Functions to work
var StartButton = document.getElementById("StartButton");
StartButton.addEventListener("mouseout", function()
{
StartButton.style.width = "100px";
StartButton.style.height = "56px";
StartButton.style.fontSize = "30px";
StartButton.style.border = "8px solid #0f0f0f";
});
StartButton.addEventListener("mouseover", function()
{
StartButton.style.width = "110px";
StartButton.style.height = "62px";
StartButton.style.fontSize = "33px";
StartButton.style.border = "8.5px solid #0f0f0f";
});
StartButton.addEventListener("click", function()
{
StartButton.style.width = "130px";
StartButton.style.height = "73px";
StartButton.style.fontSize = "39px";
StartButton.style.border = "10px solid #0f0f0f";
setTimeout(function()
{
StartButton.remove();
Start();
}, 50);
});#MainCanvas
{
background-color:#f0f0f0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid #0f0f0f;
border-radius: 10px;
image-rendering: crisp-edges;
width: 1000px;
height: 562px;
}
#StartButton
{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
border: 8px solid #0f0f0f;
border-radius: 8px;
width: 100px;
height: 56px;
font-size: 30px;
font-family: 'Akaya Kanadaka', cursive;
text-align: center;
}<html>
<head>
<base target="_top">
</head>
<body>
<canvas id="MainCanvas"></canvas>
<button id="StartButton">PLAY</button>
</body>
</html>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap" rel="stylesheet">