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

Add signature on canvas

parent 5328f316
......@@ -8,24 +8,43 @@ let fontSize = 60;
let draw = function() {
let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value;
let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value;
let fillText = document.getElementById('step2value').value;
let fillText = document.getElementById('step2value').value.trim();
let signature = document.getElementById('signature').value.trim();
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background
ctx.fillStyle = bgColor;
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
// Write text
ctx.font = fontSize + 'px Arial';
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText('Internet,', width / 100 * 8, height / 5);
ctx.fillText('et libertés.', width / 100 * 8, height / 5 + fontSize * 2);
ctx.fillText('Internet,', width * 0.08, height * 0.2);
ctx.fillText('et libertés.', width * 0.08, height * 0.2 + fontSize * 2);
ctx.fillStyle = fgColor;
ctx.fillText(fillText, width / 100 * 8, height / 5 + fontSize);
ctx.fillText(fillText, width * 0.08, height * 0.2 + fontSize);
// Add footer
ctx.fillStyle = 'white';
ctx.fillRect(0, height * 0.85, width, height * 0.15);
ctx.fill();
ctx.font = '16px Arial';
ctx.fillStyle = 'blue';
let offset = height * 0.05;
ctx.fillText('Faites comme ', offset, height * 0.9);
offset += ctx.measureText('Faites comme ').width;
ctx.font = 'bold 16px Arial';
ctx.fillText(signature, offset, height * 0.9);
offset += ctx.measureText(signature).width;
ctx.font = '16px Arial';
ctx.fillText(', soutenez ', offset, height * 0.9);
offset += ctx.measureText(', soutenez ').width;
ctx.font = 'bold 16px Arial';
ctx.fillText('La Quadrature du Net !', offset, height * 0.9);
}
let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"]');
......@@ -35,3 +54,4 @@ for (i in bgColorElems) {
bgColorElems[i].onchange = draw;
}
document.getElementById('step2value').oninput = draw;
document.getElementById('signature').oninput = draw;
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