Labels

Code Snippet 11: Hello Drawing

a demonstration of drawing on browser canvas

 So, Today we have another neat little piece of html css and javascript(I'll switch to another language soon)

and this little snippet shows you an example of how you can draw in your browser

so here is how to draw in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Drawing App</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    let isDrawing = false;
    let startX, startY;

    canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      startX = e.offsetX;
      startY = e.offsetY;
    });

    canvas.addEventListener('mousemove', (e) => {
      if (isDrawing) {
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();
        startX = e.pageX - canvas.offsetLeft;
        startY = e.pageY - canvas.offsetTop;
      }
    });

    canvas.addEventListener('mouseup', () => {
      isDrawing = false;
      ctx.beginPath();
    });
  </script>
</body>
</html>

and now I'll let Picasso senpai take it away:

Welcome! to Code Snippet #11, where we dive into the realm of creativity with a "Simple HTML Drawing App." Unleash your artistic side as we explore the code that transforms your browser into a digital canvas.

Code Overview:

This code snippet utilizes HTML, CSS, and JavaScript to create an interactive drawing application. The canvas covers the entire viewport, providing a vast space for your artistic expressions. The JavaScript part captures mouse movements, turning them into strokes on the canvas.

Understanding the Code:

Canvas Creation: The HTML and CSS set the stage, creating a full-page canvas with a clean background.

JavaScript Magic: Event listeners capture mouse actions, translating them into drawing strokes on the canvas. The code ensures a smooth drawing experience.

Application:

Artistic Expression: Use the drawing app to create digital art, doodles, or sketches.

Interactive Learning: Explore the basics of event handling and canvas drawing in web development.

Try It Yourself:

Copy the code and run it in your browser. Click, drag, and let your creativity flow on this digital canvas.

Conclusion:

While this snippet provides a foundational drawing experience, we can explore further enhancements:

Color Palette: Introduce different color options so you can paint with a rainbow of hues.

Shape Tools: Allow drawing geometric shapes like circles, squares, and rectangles.

Eraser Function: Implement an eraser tool to remove unwanted parts of your artwork.

Saving and Sharing: Enable saving your creations as images or even sharing them directly on social media.

This simple drawing app is a springboard for your creative exploration. Experiment with different techniques, unleash your imagination, and discover the joy of digital art! Have fun and share your creations in the comments below! Let's see what artistic wonders you can create together!

Happy Drawing!





Labels:

Comments

Post a Comment

Quote of the day