Antes de qualquer coisa, o estilo de ambos esta no css externo e é: canvas{ width: 600px; height: 400px; border: 1px solid black; border-radius: 20px; }
Bandeira França:
<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>Primeira obra de arte - França</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="primeiras_obras_Franca.html">França</a><br>
<a href="primeiras_obras_Alemanha.html">Alemanha</a>
<canvas>
</canvas>
<script>
var desenho = document.querySelector("canvas")
var pincel = desenho.getContext('2d')
pincel.fillStyle = 'darkblue'
pincel.fillRect(0,0, 100,400);
pincel.fillStyle = 'white'
pincel.fillRect(100,0, 100,400);
pincel.fillStyle = 'red'
pincel.fillRect(200,0, 100,400);
</script>
</body>
</html>Bandeira Alemanha:
<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>Primeira obra de arte - Alemanha</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="primeiras_obras_Franca.html">França</a><br>
<a href="primeiras_obras_Alemanha.html">Alemanha</a>
<canvas>
</canvas>
<script>
var desenho = document.querySelector("canvas")
var pincel = desenho.getContext('2d')
pincel.fillStyle = 'black'
pincel.fillRect(0,0, 600,50);
pincel.fillStyle = 'darkred'
pincel.fillRect(0,50, 600,50);
pincel.fillStyle = 'yellow'
pincel.fillRect(0,100, 600,50);
</script>
</body>
</html>