0

I want the user to be able to draw something in my homepage.

I've tried to follow SVG shape draws tutorials, but it's only for pre defined shapes.

This is what I desire:

User drawing in a page

But nothing too complex. Only one line following the cursor would be fine.

Like I said, I followed some tutorials, so here is what I have so far:

circle {
  fill: white;
  stroke: black;
  stroke-width: 2;
}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <svg height="1000" width="1000">
      <circle cx="500" cy="300" r="100" />
      <circle cx="500" cy="300" r="70" />
      <circle cx="500" cy="300" r="30" />
</svg>
  </body>
</html>

So, I want the user to be able to use their cursor to draw something. Would that be possible with only css? If not, would that be possible with css/javascript?

AMckeough
  • 37
  • 5
  • You might want to look into something like this: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ – StardustGogeta Jul 24 '19 at 13:56
  • 1
    Css, no. Canvas and JavaScript, yes. https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse – Turnip Jul 24 '19 at 13:56
  • 1
    Possible duplicate of [Draw on HTML5 Canvas using a mouse](https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse) – sodimel Jul 24 '19 at 13:57
  • 3
    The answer to this question can only be either "Yes/No" ***or*** someone explaining to you how to do it from scratch because you've shared no attempts. As such, it's a bit too broad for StackOverflow. Please edit your question to be more specific. – Tyler Roper Jul 24 '19 at 13:58
  • @TylerRoper, Ok. I will edit my question with more information – AMckeough Jul 24 '19 at 14:00
  • 1
    @StardustGogeta, wow. That's exactly what I was looking for!! – AMckeough Jul 24 '19 at 14:16
  • @Turnip, This as well! Thank you! – AMckeough Jul 24 '19 at 14:25

1 Answers1

3

Yes. You can use the HTML canvas tag and JavaScript to capture user input W3Schools -- Canvas

I'd suggest looking at the JavaScript clientX and clientY events W3Schools -- MouseEvent, and the onmousedown event Mozilla Developers -- onmousedown to achieve your desired effect.

Peter David Carter
  • 2,548
  • 8
  • 25
  • 44
  • 1
    Thank you, Peter! That's very helpful. I tried to vote you up, but I still can't, apparently. But I want to let you know that this is helping me! – AMckeough Jul 24 '19 at 14:27
  • 1
    No, you won't be able to upvote until you get a bit more reputation. However, if you find this contributes significantly towards you solving the problem you can still mark it accepted. – Peter David Carter Jul 24 '19 at 14:28