<canvas width = "600" height = "400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightblue";
pincel.fillRect(0,0,600,400);
pincel.fillStyle = "white";
pincel.fillRect(200,0,200,400);
</script>
Hola soy Pako de México.
Comparto este editor en linea para probar el codigo de los demas compañeros:
https://codi.link/%7C%7C o tambien VSC en linea https://vscode.dev/
Aquí el mio:
<canvas width = "600" height = "400"></canvas>
<style>
.escudo{
width:150px;
height:150px;
background-image: url(https://www.mexicodesconocido.com.mx/wp-content/uploads/2020/08/Depositphotos_17193605_xl-2015-scaled.jpg);
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
margin-left: 225px;
top: -275px;
}
.content-escudo{
position: relative;
}
</style>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "green";
pincel.fillRect(0,0,200,400);
pincel.fillStyle = "white";
pincel.fillRect(200,0,200,400);
pincel.fillStyle = "red";
pincel.fillRect(400,0,200,400);
</script>
<div class="content-escudo">
<div class="escudo"></div>
</div>