Estaba replicando el código visto en clase, pero separando los archivos (html, css y js) y no se ajustaba el tamaño como deseaba porque le estaba dando las dimensiones a través del css, si a alguien más que lo esta haciendo como yo le sucede lo mismo, solo tienen que poner las dimensiones en el html Aca mi código
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Canvas</title>
</head>
<body>
<!--
Al principio lo estaba haciendo con esta línea de codigo
<canvas class="plantilla"></canvas>
o sea que no definía las dimensiones para hacerlo ya en el css,
pero no funcionaba y lo modifique a la línea de abajo
-->
<canvas class="plantilla" width="600" height="400"></canvas>
</body>
<script src="index.js"></script>
</html>CSS
* {
padding: 0%;
margin: 0%;
}
.plantilla {
/*
no le den las dimensiones en el css, porque el fillRect puede
interpretar mal las dimensiones, no sé por qué, por eso comente esas líneas
width: 600px;
height: 400px; */
border: 1px solid #000;
}en el js si no tuve inconvenientes JS
let pantalla = document.querySelector(".plantilla");
let pincel = pantalla.getContext("2d");
// pincel.fillStyle = "blue";
// pincel.fillRect(0, 0, 600, 400);
pincel.fillStyle = "green";
pincel.fillRect(0, 0, 200, 400);
pincel.fillStyle = "red";
pincel.fillRect(400, 0, 200, 400);lo que pasaba cuando definía las dimenciones en el css era que el fillRect, el valor del with se duplicaba, es decir que si le dabas pincel.fillRect(400, 0, 200, 400);, te pintaba 400px de ancho y no los 200px que mandaste en la función. espero a alguien le ayude
