JavascriptSandbox/markSetter/code.js

// Propriétés
var canvas  = document.querySelector('#canvas');
var context = canvas.getContext('2d');
var wSize = 800;
var hSize = 600;
context.font = "bold 22pt Calibri,Geneva,Arial";

// Variables
var dimFocus = 15;
var mouseX = 0, mouseY = 0, mouseClic = false; // Mouse state
var baliseXArray = new Array(), baliseYArray = new Array(), baliseArrayLenght = 0;

// Fonctions
function clear() {
	context.fillStyle = "black";
	context.fillRect(0, 0, wSize, hSize);
}

function drawPic(x, y) {
	context.strokeStyle = "rgb(23, 145, 167)";
	context.beginPath();
	context.moveTo(x, y);// 1er point
	context.lineTo(x+25, y-25);// 2e point
	context.lineTo(x+25, y-50);// 3e
	context.lineTo(x-25, y-50);// 4e
	context.lineTo(x-25, y-25);// 5e
	context.closePath();
	context.stroke();
}

function drawFocus(x, y) {
	context.strokeStyle = "rgb(123, 45, 167)";

	context.lineWidth = "5";
	context.beginPath();

	context.moveTo(0, 0);
	context.lineTo(x-dimFocus, y-dimFocus);

	context.moveTo(wSize, 0);
	context.lineTo(x+dimFocus, y-dimFocus);

	context.moveTo(wSize, hSize);
	context.lineTo(x+dimFocus, y+dimFocus);

	context.moveTo(0, hSize);
	context.lineTo(x-dimFocus, y+dimFocus);

	context.stroke();
}

function drawText(x, y, text) {
	context.fillStyle = "#fff";
	context.fillText(text, x, y);
}

// Gestion des évènements
// Souris
document.addEventListener('mousemove', function(e) {
	mouseX = e.clientX;
	mouseY = e.clientY;
}, false);

document.addEventListener('mousedown', function(e) {
	mouseClic = true;
}, false);

document.addEventListener('mouseup', function(e) {
	mouseClic = false;
	baliseXArray.push(mouseX);
	baliseYArray.push(mouseY);
}, false);

// Smartphone
document.addEventListener('touchstart', function(e) {
	drawPic(200, 100);
}, false);

// Main
function mainLoop() {
	//Nettoyage
	clear();

	//Curseurs
	drawFocus(mouseX, mouseY);

	//Placement balise en cours
	if (mouseClic) {
		drawPic(mouseX, mouseY);
	}

	//Affichage de toutes les balises
	baliseArrayLenght = baliseXArray.length;
	for (var i = 0; i < baliseArrayLenght; i++) {
		drawPic(baliseXArray[i], baliseYArray[i]);
	}

	//Affichage effectif
	drawText(2, 24, baliseArrayLenght + " balises");
}

//Loop
setInterval(mainLoop, 20);