Ввод графической информации может быть осуществлён с различных устройств: клавиатуры, мыши, сканера или графического планшета. Каждое из них имеет те или иные достоинства, но основной характеристикой является удобство использования. Клавиатура плохо подходит для построения изображений, так как она изначально предназначена для набора символьной, а не графической информации. Однако применение клавиатуры для ввода графической информации имеет определённые преимущества. С клавиш можно перемещать курсор каждый раз на одну позицию.
Робот:
var canvas = document.getElementById('cl');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.fillRect(25, 0, 10, 10);
ctx.fillStyle = 'blue';
ctx.fillRect(27, 2, 2, 2);
ctx.fillRect(31, 2, 2, 2);
ctx.fillStyle = 'purple';
ctx.fillRect(29, 10, 2, 5);
ctx.fillStyle = 'black';
ctx.fillRect(15, 15, 30, 2);
ctx.fillStyle = 'grey';
ctx.fillRect(22.5, 15, 15, 20);
ctx.fillStyle = 'green';
ctx.fillRect(22.5, 35, 2, 15);
ctx.fillRect(35.5, 35, 2, 15);
Стикмэн:
ctx.fillStyle = 'black';
ctx.strokeRect(25, 50, 10, 10);
ctx.fillStyle = 'blue';
ctx.fillRect(29, 60, 2, 28);
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.moveTo(29,70);
ctx.lineTo(40,62);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.moveTo(30,70);
ctx.lineTo(20,62);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.moveTo(30,86);
ctx.lineTo(20,95);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.moveTo(29,86);
ctx.lineTo(40,95);
ctx.stroke();
И да,надеюсь ты разбираешься в Javascript`е и знаешь что как.