Javascript-форум - Создание fillRect на канвас при клике по канвасу

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Создание fillRect на канвас при клике по канвасу (https://javascript.ru/forum/misc/75732-sozdanie-fillrect-na-kanvas-pri-klike-po-kanvasu.html)

Создание fillRect на канвас при клике по канвасу

Крч при клике по канвасу должен создавать квадрат(ctx.fillRect(mousex,mousey)) по координатам клика.Такое возможно реализовать ?

Получить координаты клика, получить координаты холста, найти координаты клика на холсте и отрисовать квадрат.

canvas квадрат по клику

Всемогущий,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
     var canvas = document.getElementById('canvas'),
         ctx = canvas.getContext('2d');

	canvas.addEventListener('click', function(e){
		var x = e.pageX - this.offsetLeft,
	    	y = e.pageY - this.offsetTop;
            ctx.fillStyle =  '#66FF00';
            ctx.beginPath();
            ctx.rect(x, y, 15, 15)
            ctx.fill();
            ctx.stroke();
	}, false);

</script>
</body>

</html>

Рони, в вашем коде ошибка во первых(посмотрите внимательно) во вторых когда я тыкаю на канвасе квадрат непоявляется.

Всемогущий,
не понимаю.

Цитата:

Сообщение от рони (Сообщение 497647)

Всемогущий,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
     var canvas = document.getElementById('canvas'),
         ctx = canvas.getContext('2d');

	canvas.addEventListener('click', function(e){
		var x = e.pageX - this.offsetLeft,
	    	y = e.pageY - this.offsetTop;
            ctx.fillStyle =  '#66FF00';
            ctx.beginPath();
            ctx.rect(x, y, 15, 15)
            ctx.fill();
            ctx.stroke();
	}, false);

</script>
</body>

</html>

Цитата:

Сообщение от рони (Сообщение 497671)

Всемогущий,
не понимаю.

Странно,очень странно наверное у меня ошибка в своем коде куда я вставил ваш код.Все крч я запустил ваш код все работает!!!! все отлично.