Verified Commit 5328f316 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Add user text in canvas

parent c5442912
let canvas = document.getElementById('output');
let ctx = canvas.getContext('2d');
let bgColorElems = document.getElementsByName('bg-color');
let i;
let width = canvas.width;
let height = canvas.height;
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;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background;
// Draw background
ctx.fillStyle = bgColor;
ctx.rect(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.fillStyle = fgColor;
ctx.fillText(fillText, width / 100 * 8, height / 5 + fontSize);
}
let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"]');
let i;
for (i in bgColorElems) {
bgColorElems[i].onchange = function(e) {
draw()
}
bgColorElems[i].onchange = draw;
}
document.getElementById('step2value').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