Учим HTML5 Canvas за 30 минут! 

Хорошая подача урока, сжато и четко. Для понимания вектора развития очень подойдет. Однозначно лайк.

Хауди, спасибо тебе большое за твою работу.. Очень мотивируешь и просто в кайф смотреть твои видео)

Спасибки! Это были продуктивные полутора часа просмотра и практики =)

Ты очень крутой программист, я уже давно смотрю тебя и многому научился, по больше таких поучительных видео только порадует твоих подписчиков. 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👏👏👏👏👏👏👏👏👏👏👏👏🏼👏🏼👏🏼👏🏼

куча положительных эмоций! спасибо!))

Блин, как же я хотел этого видео и тут БАЦ, канвас за 30 минут=) Спасибо Хауди!=)

Жаль что нельзя поставить несколько лайков. Урок гораздо лучше чем многие аналоги на Ютубе. Спасибо!

Годнота! Спасибо)

Как всегда видео на высшем уровне)

Всё просто и понятно, спасибо Хауди

Огромное спасибо за урок!

Отличное видео! Спасибо!

Я прям почувствовал как Хауди чувствует себя в js. Как масло в сыре!

Спасибо!Очень позгавателен ,пасиб)

Спасибо, очень полезное видео!

Спасибо большое за урок!

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

Очень крутое и полезное видео от Хауди-хо!!!!!!!! Ставлю лайк!!!!!!

Посмотрел....Теперь играю не в игры а в HTML

Хауди, привет! Есть в планах продолжать уроки по kivy Python? Или пока вдохновения для питона нет ?)

За видео спасибо, давно пытался и бросил писать "Paint", т.к. не нашёл самостоятельно решения как избавиться от этих gap'ов. Есть вопрос: в чём разница на что вешать обработчик событий клавиатуры: на document или window?

Большое спасибо!!!

Спасибо за труд

Cпасибо! Вопрос: как мне сделать изменять background-image на файл, выбранный юзером?

Ты просто БОГ!

Так вот как эта штука работает, спасибо, хауди!

а все это можнл реализовать на Jquery? Или ванильный js оптимален для canvas?за видео лайк

спасибо за урок!

Продолжение будет по Kivy?

Спасибо!

ты мой кумир🎈

Привет, Хауди! Спасибо тебе за полезный контент :) Не думал ли ты снять видео о XML, XSL и т.п. языках?

Очень крутой и полезный видос. Спасибо!

Очень круто!

Как же у меня горит жопа!! Это очень классная обучалка и вообще я люблю этот канал, тк здесь приятная подача материала, но нельзя так быстро объяснять! Я смотрел этот видос часа 2 и за это время я посмотрел только 20 минут! Надо делать всё медленнее, чтобы человек, который пытается что-то выучить успевал за тобой😁

Спасибо )

спасибо, ваше видео мне помогло в изучении html!!!

А будет видео по созданию диаграмм JS или SVG?

лутчший урок по canvas, что видел!!!

Интересно. А относительно какой точки треугольник повернулся?

*ты каждый день мати вируешь меня спасибо огромное XD **#Хауди*

Продолжение !)

Круто!

Интересно. По простому хочу сказать что пытаюсь сделать - хочу сделать холст, на который можно перетаскиванием размещать предметы. Как понимаю можно фото превратить в объекты и двигать их на холсте. А вот еще хочу спросить - как задать масштаб и сетку-линейку есть ли такие инструменты?

Спасибо

спасибо!

Сможешь сделать видео про grid layout

Хауди, привет! Рисовалка на канве, это конечно хорошо.. но что, если дело касается взаимодействия с нарисованными элементами?) Как ловить на них события мыши? Есть библиотека Kanva кажется, там есть такой функционал, можно создавать layers и ловить на них события. А если без библиотеки? Если использовать svg, то это выходит проще.

Спасибо Абрахам!) Ты меня надоумил воспользоваться сеопультом) Дали 500руб. даже не используя код "хо" 👍

Привет автор, ответь пожалуйста, реально ли с помощью канваса рисовать картинку на компе и отправлять на сервер и она будет уникальной, то есть индентифицировать пользователя?

19:46 не отрисовался красный в градиенте, потому что ширина 500?

Хорошо учишь по делу! у меня есть вопрос:для мобильных сайтов критичны ru com net? или можно выбрать более бесплатные? q?m?

Ты за 11 минут рассказал больше чем я за пол года уча java script

отличный канал, всё информативно, простыми словами, и какие-либо вопросы остаются достаточно редко. только 19.43 насчет градиента правильно ли я всё понял: в заливке "hello world" виден переход с magenta на blue, но никакого red. - это из-за того, что у нас в определении grad в функцию createLinearGradient третьим аргументом поступает 500? то есть, мы бы увидели красный цвет в тексте, если бы он был подлиннее (или если бы вместо 500 было число поменьше), верно ?

Привет, Хауди! Будет ли серия уроков во JS DOM? Есть на англиском, но на русском ничего адекватного не нашел. Ты - лучший прогграмист на рутубе!)

Top!

Интересный урок. А есть возможность этот рисунок сохранить в видео?

Нихуя не понял, но очень интересно P.S Ну понял немного, но только из знаний в англиском языке.

Я вас прошу посоветовать приложение для изучения языков програмирывания на безе IOS

У меня есть такое правило: если дело касается видео *Хауди ХО*- тогда вначале ЛАЙК, а потом просмотр 😏

Спасибо за видео! Встала задача поворачивать треугольник по оси Y, как это можно сделать? Обычно все видео о том как повернуть ту или иную фигуру по часовой стрелке, а как ее поворачивать в другой плоскости нет(

Как сделать изображение на весь экран и поверх накладывать изображения с анимацией ??

Хей Хауди Хо ты какои тип прогромирования учил или ещё учиши?

ClearRect() тоже пойдет?

Если кому-то лень писать ручками, а похвастаться хочется то вот: Painter 1.0 Sorry, U mad bro.. var canv = document.getElementById('canvas'), ctx = canv.getContext('2d'), isMouseDown = false, coords = []; canv.width = window.innerWidth; canv.height = window.innerHeight; // Code canv.addEventListener('mousedown', function(){ isMouseDown = true; }); canv.addEventListener('mouseup', function(){ isMouseDown = false; ctx.beginPath(); coords.push('mouseup'); }); ctx.lineWidth = 10 * 2; canv.addEventListener('mousemove', function (e){ if( isMouseDown ) { coords.push([e.clientX, e.clientY]); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); ctx.beginPath(); ctx.arc(e.clientX, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); } }); function save (){ localStorage.setItem('coords', JSON.stringify(coords)); } function clear (){ ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canv.width, canv.height); ctx.beginPath(); ctx.fillStyle = '#000'; } function replay (){ var timer = setInterval(function (){ if( !coords.length ) { clearInterval(timer); ctx.beginPath(); return; } var crd = coords.shift(), e = { clientX: crd["0"], clientY: crd["1"] }; ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); ctx.beginPath(); ctx.arc(e.clientX, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); }, 20); } document.addEventListener('keydown', function(e){ if( e.keyCode == 83) { // save save(); console.log('Saved'); } if( e.keyCode == 82) { // replay console.log('Replaying...'); coords = JSON.parse(localStorage.getItem('coords')); clear(); replay(); } if( e.keyCode == 67) { // clear clear(); console.log('Cleared'); } }); :-)

божественное произношение англ...

Здравствуйте, столкнулся с такой проблемой: при написании подобного кода выдает ошибку, мол не может выполнить getContext, т.к. canv = null. Но при написании строки $('document').ready(function(){ //код }); все отлично работает. Автор канала не использует эту команду, но у него все работает. Что не так с моим Chrome?

здравствуй хауди хо у меня при работе с скриптом replaying выходит ошибка(html5.html:56 Uncaught TypeError: Cannot read property 'length' of null at html5.html:56) помоги пожалуйста

Привет а можно вапрос?Я в 29:9 не понел что и как ты пишеш???

вопросик, а зачем 27:00 вообще нужно функция clear, если при клике на KeyS можно написать => ctx.clearRect(0, 0, canv.width, canv.height), все так же работает у меня

Хорошая видео

Отличный урок! Но есть вопрос, который мучает меня, как это работает на 31:12 ? у меня с crd не работает, переписал так var e = { clientX: coords.shift(), clientY: coords.shift() }; и все заработало. Не знаю может это какое-то глобальное обновление в JS 😕

пацаны скажите пж какая музыка используется в видео

А где покопать про вращающийся автомат?

Как картинки загружать канвасом? Не одну, а несколько, для создания коллажа?

Хауди Можешь Сделать уроки по CSS3

Пожалуйста сделай урок по Bootstrap 4🙏

Спасибо за уроки Если сможете подскажите в коде ниже где косяк? Не выводит текст ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ Привет​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ Not is work ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ var canv = document.getElementById("canvas"); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ var ctx = canv.getContext("2d"); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ canv.width = window.innerWidth; ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ canv.height = window.innerHeight; ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ //Code ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ grad = ctx.createLinearGradient(0,0,500,0); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ grad.addColorStop('0','black'); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ grad.addColorStop('.50','blue'); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ grad.addColorStop('1','red'); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ctx.fillStyle = grad; ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ctx.textAlign = "center"; ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ctx.font = "30px Georgia"; ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ctx.fillText= ("Hellodsfsdfsdf", 50,​ 70); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​

очищать экран лучше так ctx.clearRect(0,0,w,h) вместо ctx.fillStyle = 'white' ctx.fillRect(0,0,w,h)

Что обозначают скобки { } , после того, как ты написал function replay() ?

Было бы шик делать текстовые версии на сайте. Читать как то удобнее

Хауди делай больше видеуроков по языкам,но за час

Хауди, почему забросил такие уроки??? обидно....

a gde uroki po python kivy?((

Я чё то маленько потерялся. corse.push() - добавили тупо любой текст, в итоге при очередном вырезании shift получает этот текст, закидывает в объект на один элемент clientX: crd[ 0 ] второй clientY: crd[ 1 ] пустой остаётся и дальнейшие действия не прокатывают из-за несуразицы кода поэтому и не дорисовывает линии. Я так понимаю? Или я упустил глубокий смысл текста в push

А как задать неск цветов подскажите пж !задаю вроде получается а вот когда идет replay лини окрашиваются а вот круги черные !

Ого, реклама Ивана Петреченко, я у него когда то учился, теперь работаю))

Круто

Как залить эту игру, допустим в вк?

На 18-й секунде эффектно

А будет видео paint за час?))

*классный урок, а те кто хотят по серьёзнее освоить канвас, и вообще js, то советую прочитать книгу - javascript для самых маленьких, очень интересная книга, не пожалеете потраченного времени;) Хауди, ставь лайк, если читал эту книгу :)))*

Почему используется манипуляция с fillRect() и белым цветом, вместо того, чтобы сделать clearRect(0,0,canv.width,canv.height)?

хоть я ни бум бум в программировании, но было очень интересно! что здесь является языком программирования: канвас или джаваскрипт?

Эти промежутки между шарами появляются если частота опроса мыши маленькая. При 1000 почти нормально рисуется. на 125 большие промежутки.

топ урок

Вишенка на торте хайпа

нарисовал канву как сделать чтобы она отображалась вместо background который дублирует текстуру (repeating), на этом эелементе в виде альфа наложения (частицы) хотелось бы вывести в конву и смешивать, а всё остальное поверх (элементы сайта), а то у меня канва рисуется поверх всего... или замещает bacground или если мудрить тормозит, т.к. все тело сайта с полупрозрачностями :)

к html5 можно javascript подключить?или в самом html пишется?

Хауди, привет. Где Python Kivy? Уже месяц прошел(