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

Изучаем работу с HTML5 Canvas и уже сходу пишем что-то настоящее.
В уроке будет работа с примитивами, работа с текстом, с градиентом, с анимацией, а также многое другое.
В целом весело и легко =)
=
💗 🤟 👊 Участвовать в интенсиве по JS: wep.wf/daaldi
=
🆇 Ссылки из видео 🆇
𝟭: Всё по Canvas www.w3schools....
Наш паблик: how...
Наш телеграм: t.me/howdyho
Сотрудничество topic-8...
💗 Музыка предоставлена RUclips Audio Library.

[@ArtikMan1994]

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

[@HowdyhoNet]

Рад помочь!)

[@ogurchek9366]

@@HowdyhoNet а как сдєлать штоб круг рисовался при простом нажатиє? линия вєдьотс а круг сам не рисуется. Я не руский. Извините за не грамотность

[@ilnev3738]

@@ogurchek9366 он показывал в видео

[@MegaDragon1112]

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

[@HowdyhoNet]

Рад помочь

[@MegaDragon1112]

@@synthesisone2787 Да, прошелся по HTML/CSS/JavaScript/PHP/Mysql, сейчас всё закрепляю практикой параллельно изучая WordPress

[@swokko88]

@@MegaDragon1112 а Python?)

[@user-jw1pc9ls1x]

@@swokko88 зачем, если он php выучил, я вообще буду node js учить, хотя он не легкий, но я чисто по js иду

[@swokko88]

@@user-jw1pc9ls1x я рофлю
И NodeJS легче обычного JS

[@i2ri2k13]

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

[@vivettanors]

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

[@ilikemycat9444]

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

[@ruslanundefined2242]

Хаха лучший

[@riwkus]

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

[@oskarrimjan4520]

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

[@user-hc5ul3ds5u]

0.75 мужик, 0.75...

[@NikolajSafarov]

@@user-hc5ul3ds5u ?

[@user-io3ti7kf2k]

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

[@vitaliypogoretsky3199]

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

[@faust374]

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

[@HowdyhoNet]

Стараемс

[@user-ir8nd6mj2b]

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

[@dede6834]

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

[@user-lm1rb6xv6z]

Dede +

[@artwell8703]

HTML, CSS и JavaScript Надо знать

[@holdongang6262]

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

[@salievb1598]

Спс

[@cosmicbeetle382]

Спасибо!!!

[@__Minecraft_Poseidon__]

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

[@bogdan_ov]

Конечно! Кого он учит!!?

[@jamesflanders994]

@@bogdan_ov Людей. По крайней мере с виду.

[@huyna_polnaya]

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

[@MrAmir991]

У WebDesign Master есть урок

[@user-xtkjdtr16]

У Гоши Дударя есть такой урок.

[@newview8925]

У it doctor есть хорошие уроки

[@teslafeo1614]

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

[@lime1453]

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

[@user-fo8bg3wp8c]

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

[@michaelqi6985]

Что сделать, что бы через час у меня было 1000$?

[@user-fo8bg3wp8c]

Значит можно взять кредит.

[@UserSashko]

что ты куришь?

[@_dyats]

Эээээ, чё ты врешь людям Путин был только 13 сроков(и то это уже его "двойники", потому что первый умер 2 года после первого срока), ты походу был в паралельной реальности-_-, смотри мне тут, как бы временно-просторовый континиум не взорвался, ато тогда всем жопа

[@user-fo8bg3wp8c]

Курю сигареты Treasurer

[@777Vasya77]

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

[@lubbutel_porrjaty172]

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

[@lsoka8928]

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

[@Max-kr4ie]

Спасибо ушел читать) надеюсь ты жив здоров.

[@Kot_off]

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

[@user-vn4vj3xk9q]

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

[@Liventer]

Хм...
Ивангай...
Марьяна Ро...
Иван Ро...?
Марьгай...?

[@GameChannelOfficial]

ару

[@user-is2xz3zt6h]

Рамиль
у тебя на автарке ТЫ, после написания коммента.

[@i2ri2k13]

@@Liventer Хм...
Хауди Хо...
Гоша Дударь...
Марьяна Ро...
Ивангай...
Хауди Ро.
Гоша гай.
Марьяна Дударь.
Иван Хо!

[@xaosit8974]

Гошауди, Хаоша

[@bipiwnik]

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

[@Evgeny..]

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

[@xenonist4502]

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

[@fartuh]

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

[@rsdpalinokov1771]

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

[@user-wd2od2ew9v]

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

[@javascript7543]

ты мой кумир🎈

[@vigilit-video1765]

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

[@HowdyhoNet]

Рад помочь

[@jyxaz1782]

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

[@HowdyhoNet]

Нет, пока в планах нет таких уроков.

[@EvilGazz]

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

[@Aidar__]

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

[@doublebon135]

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

[@rokaka_4576]

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

[@yeshyeshli]

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

[@HoshiramaSensei]

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

[@Aidar__]

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

[@animeMoments937]

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

[@drewkarchev7320]

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

[@ICruciall]

Наверно на пересечении серединных перпендикуляров

[@Vimble]

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

[@user-br5xx6yc3m]

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

[@max_mgtow]

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

[@HowdyhoNet]

=)

[@max_mgtow]

Хауди а через какое время запрос ВЧ будет в топе? Через 2 месяца или полгода? И не кинет ли Google в бан за ссылки?)

[@HowdyhoNet]

Надо пользоваться аккуратно, я где-то говорил, что больше 5-10% бюджета на ссылки лучше не отдавать.
Когда он окажется в топе тебе могут сказать в поддержке SeoPult.
Главное пользуйся осторожно.

[@dzundzanify]

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

[@ktoto3292]

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

[@kukusikibabasikitv]

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

[@user-nx9te3nu4f]

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

[@sergiynimerovsky1917]

learn.javascript.ru, только здесь можно отлично выучить язык! (Хауди рекомендует)

[@sarxanabdullayev6440]

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

[@user-bd2mm9sq3m]

Сделал все как показано в видео, но фигура не рисуется

[@singlebw4065]

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

[@singlebw4065]

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

[@user-tx3wc5pl5c]

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

[@gensis5426]

180 - like ; 0 - dislike

[@arturmavlyuchenko7647]

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

[@somnum1531]

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

[@IldarFreeLancer]

спасибо!

[@nadd5386]

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

[@LeanaMigdal]

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

[@wn4ik489]

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

[@user-uw9is8gw2k]

ору, я надеюсь за 4 месяца ты хоть что то изучил, я так просто ору, зачем идти учить canvas, если ты даже не понимаешь где пишется логика у функции

[@user-uw9is8gw2k]

@@mathiaswei8715 зачем ты мне это пишиш, я уже знаю html препроцессор kit, css препроцессор sass на синтаксисе scss, git github знаю , именно работу с консольной, js более чем основы, вот учу react и иногда node, вообще это глупо, зачем ему canvas, если он не знает что такое function, уму не постижимо, таким людям не нужно подсказывать , он должен идти основы учить, да и мы же программисты, должны сами искать ответы на свои вопросы, это важный скилл

[@egorlaptev257]

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

[@user-to6ls7mg5s]

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

[@HowdyhoNet]

Второе.

[@uzproger9525]

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

[@neonneon2091]

Очень круто!

[@tartarus2921]

А кто Хаоди по национальности?

[@user-bd3um1qu3b]

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

[@SC-eg3dv]

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

[@sergienkoandrey3855]

У меня трабл возник, знающие подскажите)
По нажатию круг появляется левее места нажатия,в чём дело?

[@batov7064]

У меня было такое только в мобильной версии, там вообще с канвасом проблема, как я понимаю. Если у тебя в десктопе так, то хз

[@user-ty6fq9os9k]

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

[@zeus2421]

Всё классно. Но только не понятно как залить фигуру которая нарисована линиями. Типо как сделать border ты показал. А как сделать заливку нет

[@zeus2421]

Хотя спасибо, подтолкнул .Самому разобраться.

[@alsagir87]

Спасибо!

[@user-xh3bg1bg1o]

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

[@itsollustrifugate6955]

В хроме не работает ctx.drawWindow

[@user-jt7mh6tu1c]

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

[@user-el8pi1yp6q]

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

[@soucandcreative9108]

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

[@TailwindCSS]

Спасибо )

[@Afalinj]

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

[@Rostyslav-sg2il]

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

[@user-zq1if3uv8i]

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

[@Avonavi232]

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

[@HowdyhoNet]

Простые расчеты от e.offsetX, как и в любых граф. приложениях.

[@eblavoltom]

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

[@user-gd5bw7ut3o]

Круто !

[@ProFG-]

А ты будешь учить и показывать с++

[@romankocherezhchenko34]

Он по вебу

[@PhotoshopArt8ua]

a gde uroki po python kivy?((

[@nerusnotfound]

Круто

[@nan-simon]

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

[@tobe459]

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

[@HowdyhoNet]

Это вопрос больше по SEO.
Насколько я знаю - доменная зона не влияет на продвижение, если это не домен второго уровня (co.uk) и если это не труднодоступная доменная зона (de,fr и тд).
Но, могу в чём-то ошибаться.

[@user-uw9is8gw2k]

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

[@Sempai-ui9gd]

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

[@HowdyhoNet]

Верно

[@komronpulatov6785]

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

[@user-ij8gm2bd7i]

ребят, помогите , пожалуйста. Когда вызываю несколько кругов, между ними образуется след. Например, если я вызвал три круга, между ними какого-то хера рисуется треугольник :(
Везде искалЮ но не нашел ответ. Пж помогите

[@toy_by_toy]

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

[@HowdyhoNet]

Верно

[@xxx4088]

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

[@user-dw1uu6cb9j]

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

[@user-tw3mc8fd4r]

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

[@troll2941]

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

[@powerrampage]

what is the SUBLIME COLOR SCHEME name ?

[@mushnikov35]

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

[@jamoliddinqodirov9866]

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