Создаём HTML5 PaintBrush

Attention. First lesson presentation in english is available here
Almost the same.
You have to  create text type object, name it as text01, insert it into stage
And change program code in the end of the list.
It makes the cursor draw if A-key pressed, and cleanes canvas when S-keys press.

demo is here http://2l4u.ru/program_507.php

На самом первом уроке, хочется рассмотреть обязательные шаги необходимые при создании игры с помощью сервиса 2l4u.ru

1. Входим в систему.
2. Создаём новый проект.

3. Открываем вкладку Объекты и создаём объект "text01"

4. Теперь открываем вкладку Сцена
Открываем сцену на редактирование

Теперь нужно вытащить объект text01 на сцену

5. После этого находим Контроллер "ctrl"
Нажимаем на шестерёнку и вызываем окно свойств

В окне свойств нам нужно добавить событие Create - создание. Это событие
 стартует в начале игры. И это именно то, что нам нужно.

Итак, добавляем событие Create

Выбираем "Create" из списка

Результатом, действием на это событие добавим "blank script"

 
теперь откроем blank script - чистый скрипт на редактирование...

Откроется окно Редактор событий

В секции "editor window" копируем следующий код:

//insert CANVAS tag into the game field
$("#contnt").append('<CANVAS></CANVAS>');
// mode toggle variable
var draw=0;

// 2d contest handler
var canvas = document.querySelector("canvas"); 
// obj1 of 2d contest
var holst = canvas.getContext("2d");

canvas.width=screen_width; 
canvas.height=screen_height;

// work with keyboard
$(document).keydown(function(n) {
switch (n.keyCode){
 // A letter key
case 65:
my_obj_1.fillStyle="#ffffff";
draw=draw+1;
$("#text01").html("PB draw :: Press A to Stop :: Press S to Clear");
if (draw>1){
draw=0;
$("#text01").html("PB don't draw :: Press A to Draw :: Press S to Clear");
}
   break;

// S letter key
case 83:

holst.fillStyle="black"; 
holst.fillRect(0,0,canvas.width,canvas.height);

break;

}
});


// canvas field

holst.fillStyle="black"; 
holst.fillRect(0,0,canvas.width,canvas.height);

// brush

var rect_width=5;
var rect_height=5;
var my_obj_1 = canvas.getContext("2d");
my_obj_1.fillStyle="#ffffff";

// work with mouse

$("#contnt").mousedown(function() {
my_obj_1.fillStyle="#ffffff";
my_obj_1.shadowColor = '#00ffff';
my_obj_1.shadowBlur = 10;
draw=1;
});
$("#contnt").mouseup(function() {
draw=0;
});

 
  var mouse_y;
  var mouse_x;

// calculate mouse position for the brush
   $(document).mousemove(function(e){
  
   mouse_y=e.pageY;
   mouse_x=e.pageX;
 
if (draw==1){
 

  my_obj_1.fillRect(mouse_x,mouse_y,rect_width,rect_height);
   x=mouse_x;
   y=mouse_y;
}

}); 

// decoration for the status text

$("#text01").css("background","#ffd700");
$("#text01").css("border","1px    solid    #110f00");
$("#text01").css("padding","3px");
$("#text01").css("cursor","pointer");
$("#text01").css("left","3px");
$("#text01").css("top","3px");
$("#text01").css("width",(screen_width-12));
$("#text01").css("height","20px");

$("#text01").html("PB: don't draw :: Press A to Draw :: Press S to Clear");



Теперь нажмём "Сохранить".
Далее, закроем все окна и нажмём "Пуск" или "run game"

Когда запустится наша игра, при нажатии клавиши A- программа будет переключаться между режимами рисования и "нерисования", S-будет стирать нарисованный рисунок