Verified Commit c5442912 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Start to write canvas

      Background-color is updated on click
parent cce2d9a7
let canvas = document.getElementById('output');
let ctx = canvas.getContext('2d');
let bgColorElems = document.getElementsByName('bg-color');
let i;
let draw = function() {
let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background;
ctx.fillStyle = bgColor;
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
}
for (i in bgColorElems) {
bgColorElems[i].onchange = function(e) {
draw()
}
}
......@@ -169,7 +169,7 @@
</div>
</div>
<main>
<div id="output"></div>
<canvas id="output" width="600" height="413"></canvas>
<div id="credits">
<p><strong>Site hébergé par La Quadrature du Net</strong></p>
<p><strong>Crédits :</strong> Les policies utilisées viennnent de <strong>Velvetyne Type Foundry</strong>. Bluu par Jean Baptiste Morizot, Bilbo Inc par Hélène Marian Srodogora, Boeticher par Charles Paille, Combat par Martin Desinde, Gulax par Morgan Gilbert, Lineal par Frank Adebiaye, Resistance par Collective, Savate par Wech, Solide Mirage par Jérémy Landes-Nones, Steps mono par Jean Baptiste Morizot, Terminal par Rapaël Bastide et Jérémy Landes-Nones.</p>
......@@ -179,4 +179,5 @@
</div>
</main>
</body>
<script src="./canvas.js"></script>
</html>
......@@ -138,9 +138,6 @@ main {
}
main > #output {
height: 413px;
width: 600px;
background-color: red;
margin-top: 7vw;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment