Ask coding questions

← Back to all posts
Canvas Color
WilliamXing (45)

How can I make the canvas colored?

Answered by AloegelhiPlaysR (109) [earned 5 cycles]
View Answer
Comments
hotnewtop
AloegelhiPlaysR (109)
<style>
.canvas { 
background-color: blue;
}
</style>
IntellectualGuy (710)

There are 3 ways that you could do this, through the Seperate CSS stylesheet, internal, or inline

For Seperate CSS stylesheet

#canvas{
   background-color:red;
   /*Feel free to change the values*/
}
/*You could also do this*/
canvas{
   background-color:red;
}

Internal

<style>
#canvas{
   background-color:red;
   /*Feel free to change the values*/
}
/*You could also do this*/
canvas{
   background-color:red;
}
</style>

Inline

<canvas id="canvas" width="400" height="400" style="background-color:red;"></canvas>
mwilki7 (1134)

If you want the actual canvas itself to be red you can also do:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.fillStyle = "red";
context.fillRect(0, 0, canvas.width, canvas.height);