How to list colors with rectangles and the color number in the middle of the rectangle in canvas
Question
Lately I have been struggling with listing colors in canvas using rectangles
What I have tried is:
const ctx = document.getElementById('canvas').getContext('2d');
const colors = ['aqua', 'blue', 'yellow', 'green'];
for(var i =0; i < colors.length; i++) {
// Color number
ctx.fillStyle = "black";
ctx.fillText(i+1, i*100, i*100);
// Color rect
ctx.fillStyle = colors[i];
ctx.fillRect(i*100, i*100, 25, 25);
}
and i got this
What i wanted to achieve:
So any ideas.
I'm not too good at canvas I just started using it lately.
2 answers
solution1
1 2018-10-19 14:57:05
You're multiplying both x and y axis by 100
ctx.fillRect(i*100, i*100, 25, 25);
^ ^
x y
instead you should keep the y value equal, if you want the rectangles on the same position on the y-axis
I think you should change ctx.fillText(i+1, i*100, i*100); to ctx.fillText(i+1, i*100, i);
and
ctx.fillRect(i*100, i*100, 25, 25); to ctx.fillRect(i*100, i, 25, 25);
To display the text inside the rectangle, you'll need to offset the text.
When your rectangle is 25 x 25 px, it's easy to put the text at the center of the rectangle, by adding to the x and y axis half of the size of the rectangle 12,5 px or 12px (rounded).
// first draw the rect
ctx.fillStyle = colors[i];
ctx.fillRect(i*100, i*100, 25, 25);
// Color rect
ctx.fillStyle = "black";
ctx.fillText(i+1, i*100 + 12 , i*100 + 12);
// ^ ^ added an offset for the text there
Note that you should first render the rectangle, and then the text on top of it.
solution2
1 2018-10-19 15:08:59
I am putting a solution here, but it needs more OOP to avoid redundancy. I would leave that to you so you do more research and learn more.
HTML and CSS : We have three canvases here with different backgrounds and same height..
<canvas id="myCanvas_1" width="50" height="50"
style="border:1px solid #d3d3d3; background-color: yellow;">
</canvas>
<canvas id="myCanvas_2" width="50" height="50"
style="border:1px solid #d3d3d3; background-color: red;">
</canvas>
<canvas id="myCanvas_3" width="50" height="50"
style="border:1px solid #d3d3d3; background-color: green;">
</canvas>
Javascript : this controls what goes inside the canvas
var canvas_1 = document.getElementById("myCanvas_1");
var canvas_2 = document.getElementById("myCanvas_2");
var canvas_3 = document.getElementById("myCanvas_3");
var ctx = canvas_1.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("5",15,35);
var ctx = canvas_2.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("8",15,35);
var ctx = canvas_3.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("12",8,35);
Complete snippet to run and try:
<html>
<body>
<canvas id="myCanvas_1" width="50" height="50"
style="border:1px solid #d3d3d3; background-color: yellow;">
</canvas>
<canvas id="myCanvas_2" width="50" height="50"
style="border:1px solid #d3d3d3; background-color: red;">
</canvas>
<canvas id="myCanvas_3" width="50" height="50"
style="border:1px solid #d3d3d3; background-color: green;">
</canvas>
<script>
var canvas_1 = document.getElementById("myCanvas_1");
var canvas_2 = document.getElementById("myCanvas_2");
var canvas_3 = document.getElementById("myCanvas_3");
var ctx = canvas_1.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("5",15,35);
var ctx = canvas_2.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("8",15,35);
var ctx = canvas_3.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("12",8,35);
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.