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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очень круто!

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

ты мой кумир🎈

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

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

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

Спасибо!

Круто!

Спасибо )

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

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

спасибо!

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

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

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

Спасибо

Круто

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

Top!

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

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

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

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

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

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

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

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

Если кому-то лень писать ручками, а похвастаться хочется то вот: 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'); } }); :-)

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

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

топ урок

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

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

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

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

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

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

nice

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

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

🤯

За песню из мема кот носок лайк)

Я выучил за 30 минут ! Спасибо ! Мне всего лишь пришлось изучить много чего(опустим подробности), потом я стал опытным разработчиком через 15 лет я стал профи, после изобрели машину времени, доллар обесценился, биткоин развалился, путина избрали на 17 срок, после заморозки медведева. Теперь я вернулся из будущего Сеньором и выгнал себя который сейчас в прошлое что бы изобрести Эпл, если чего пишите помогу советом, я же теперь миллиардер и мне ничего не надо делать, у меня много свободного времени.

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

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

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

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

Зачем нам Иван Петриченко, когда у нас есть ты?)

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

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

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

180 - like ; 0 - dislike

Мануал топ

0:40 старый ... эксплорер версии 9.. ХА!!! я еще IE 5.5 помню.. и Милениум

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

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

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

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

Всё я пошел в школу🤣

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

*Спустя наверное год решил переписать свой старый paint :)* P.S: _Код пришлось сильно ужать и изуродовать т.к. он не помещался в рамках моего статуса на_ *CodePen* codepen.io/KOSAKURA59a56cfaf4/project/editor/ZmpeVj

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

Я обрыл весь ютуб и наконец я нашёл (я хочу создать игру в которой надо уварачиваться от пуль)

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

Хм... Гоша Дударь... Хауди Хо... Гоша Хо...? Хауди Дударь...?

Я офигел..

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

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

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

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

Спасибо за уроки Если сможете подскажите в коде ниже где косяк? Не выводит текст ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ Привет​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ 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); ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​

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

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

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

Сними видео совместно с Гошей Дударем,пж

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

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

Пожалуйста скажите как сделать так чтобы твоём калькуляторе использовался один input и чтобы твоя программа невыводила то что ты написал умения работает только с двумя input

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

Из этого видео я понял, почему в пэинт линяя закругленная.