HTML5 Canvas Drawing App (Part 1/6)

Показать описание

Official site

Twitter

Рекомендации по теме

Комментарии

For the context arc, the 5 parameters should include clientX and clientY in order to work in firefox so the line of code for the context method would be:
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);

Thank you so much for this tutorial! Keep 'em comin'!

jamiistrong

Nice lessons!
Tested on Firefox, Chrome, Opera, Safari

mkfk

This is odd. What text editor are you using? Because chrome is telling me it's picking up an illegal character. The code itself is absolutely fine.

funkymaniak

Cool, thanks for the great info!

I found out that for it to also work in Firefox, I needed to use "clientX" instead of "offsetX" and the same for Y.

McGavel

Check javascript is loading properly by adding an alert in there, first line

alert('test');

If that's a no show you know it's not loading your script

funkymaniak

I love your tutorials! They've helped me a lot!

leong

Down in the right hand corner is a star. Click that and select a higher number. Try to get it up to 720

Knards

You're using the variable name 'can' and then referencing the variable 'canvas' in other parts of the code. Just use either 'can' or 'canvas'

Hope this helps

funkymaniak

In HQ mode i can read the code perfect! So good tutorial.

Disneyverzamelaar

What do I do if I want to draw inside a div. Thank you.

TjipzPK

Hi PHPacademy thanks for a great tutorial.... i was wondering what happen to your CSS tutorials ...???

tedwon

hey, it's great, but i'have a question:
how to add touch?

stephanserri

Can't see any errors with this other than that variable name. What error are you getting in the web inspector?

funkymaniak

Can you zoom in a bit in the next videos? I can't see the code well.

peristiloperis

I can't read the code too! Could you fix that, because so far it looks like a good tutorial.

Disneyverzamelaar

The code is not working. Its not working on IE or Chrome, alert is poping up...
alert("hello");
var canvas =
var context = canvas.getContext('2d');
var radius = 10;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var putPoint = function(e){

context.beginPath();
context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
context.fill();

}

canvas.addEventListener('mousedown', putPoint);

sonalj

Hi there. Sorry about this, I forgot that Firefox doesn't use the 'offsetX/Y' properties.

Replace line: context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
with: context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);

This should be a far more cross-compatible option. I will mention this in Part 2.
Thanks
Jared

funkymaniak

Looks really great to me! Gonna learn alot today :D

Excutionxx

Your mouse writing is better than my hand-writing...

matthewwalsh

I wrote few things different but this is what he has but can not get it to work. Can someone help me. I have tried it in Chrome and IE.
<html>

<head>

</head>

<body style="margin:0">
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

<script>

var
var
var radius=5;

var putPoint = function(e){
context.beginPath();
context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
context.fill();
}
canvas.addEventListener('mousedown', putPoint);

</script>
</body>

</html>

MichaelGriffis

HTML5 Canvas Drawing App (Part 1/6)

HTML5 Canvas Drawing App (Part 1/6)

HTML5 Canvas Drawing App (Part 2/6)

HTML5 Canvas Drawing App (Part 3/6)

HTML5 Canvas Drawing App (Part 4/6)

HTML5 Canvas Drawing App (Part 6/6)

HTML5 Canvas Drawing App (Part 5/6)

Create a simple drawing app using javascript and HTML5 canvas

HTML Canvas Drawing App | HTML, CSS & JavaScript

Adding Pan Tool To HTML Canvas | Drawing App Tutorial Part 7

CANVAS JavaScript Drawing App 🎨 | Draw ● Undo ● Erase ● Colors | Full HTML5 Canvas App Tutorial...

Part-1 HTML5 Canvas Paint App using HTML, CSS and JavaScript. #javascript #html5 #canvas #css

Drawing App | HTML5 Canvas & JavaScript Tutorial

🔥HTML Canvas Tutorial | HTML Canvas Drawing App | HTML Canvas Projects | HTML 2022 | SimpliCode

Adding Zoom Tool To HTML Canvas | Drawing App Tutorial Part 8

Create Stylish Drawing App with HTML Canvas | HTML5 Canvas Tutorial #shorts #coding #JavaScript

Build A Drawing or Paint App in HTML CSS & JavaScript | Drawing App in JavaScript

Using a Canvas to Create a Drawing App in Ionic - Part 1

canvas drawing app using html , css and javascript #html5 #css3 #codesnippet #programming

HTML5 Canvas Drawing App | Canvas & JS Drawing App | Create a drawing app

Create Drawing App in Just 10 line in P5 JS | html5 canvas #shorts #javascript #developer #coding

Creating a Simple Paint App with HTML5 Canvas and Javascript

CANVAS JavaScript Drawing App 🎨 ( Draw, Undo , Change Colors) HTML5 Canvas App Tutorial

HTML5 CANVAS - PART 1 - DRAW CANVAS

Create 3d Sphere Particle using P5 Javascript | html5 canvas #shorts #javascript #developer #coding