Задать вопрос
@alto2013
javascript

Можно ли создать программно работающий элемент canvas в html документе?

почему не отрабатывает код?
<!doctype html><html>	<head> <script type="text/javascript">
var c1 = document.createElement('canvas');   c1.style.height = "400px";
c1.style.width = "400px";    ctx     = c1.getContext('2d');
ctx.fillRect(110, 110, c1.style.width, c1.style.height);
 </script> 	</head><body></body></html>
  • Вопрос задан
  • 321 просмотр
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@ZaptoS 
<!doctype html>
<html>
   <head>
      <title>canvasExample</title>
   </head>
   <body>
      <script type="text/javascript">
         var c1 = document.createElement('canvas');
         document.body.appendChild(c1);
         c1.style.height = "400px";
         c1.style.width = "400px";
         ctx     = c1.getContext('2d');
         ctx.fillRect(110, 110, parseInt(c1.style.width), parseInt(c1.style.height));    
      </script>
   </body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 4
AMar4enko
@AMar4enko
Ну его ж еще надо сделать append
Ответ написан
Комментировать
Комментировать
@woland_812
Во-первых, элемент создал, а в документ не добавил
document.body.appendChild(c1);
Во-вторых, 
ctx.fillRect(110, 110, c1.style.width, c1.style.height)
это ничего не нарисует, т.к. c1.style.width и c1.style.height вернет строку "400px". Приведи к числу 
ctx.fillRect(110, 110, parseInt(c1.style.width), parseInt(c1.style.height))
Ответ написан
Комментировать
Комментировать
@GreatRash
В третьих:

// c1.style.height = "400px";
// c1.style.width = "400px";

с1.width = 400;
c1.height = 400;


Иначе канвас тупо отмасштабируется.
Ответ написан
Комментировать
Комментировать
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
В четвертых, не использовать в вычислениях c1.style.height и c1.style.width они могут быть в любых единицах, используйте c1.offsetHeight и c1.offsetWidth - они всегда будут числом и в пикселях
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы