Create a Drawing App with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a drawing app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create drawing-app

and select all the default options to create the project.

Create the Drawing App

To create the drawing app, we write:

<template>
  <canvas
    ref="canvas"
    @mousemove="draw"
    @mousedown="setPosition"
    @mouseenter="setPosition"
    @resize="resize"
    id="canvas"
  ></canvas>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pos: {},
    };
  },
  methods: {
    setPosition(e) {
      this.pos.x = e.clientX;
      this.pos.y = e.clientY;
    },
    resize() {
      const { canvas } = this.$refs;
      const ctx = canvas.getContext("2d");
      ctx.canvas.width = window.innerWidth;
      ctx.canvas.height = window.innerHeight;
    },
    draw(e) {
      if (e.buttons !== 1) {
        return;
      }
      const { canvas } = this.$refs;
      const ctx = canvas.getContext("2d");
      const { pos } = this;
      ctx.beginPath();
      ctx.lineWidth = 5;
      ctx.lineCap = "round";
      ctx.strokeStyle = "green";
      ctx.moveTo(pos.x, pos.y);
      this.setPosition(e);
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    },
  },
};
</script>

<style scoped>
#canvas {
  border: 1px solid black;
}
</style>

In the template, we add the canvas element.

We assign it a ref so that we can access the component code.

Also, we add a few event listeners to the canvas.

mousemove listens to mouse movements and draw on the canvas when we move the mouse.

mousedown and mouseenter events are triggered when we click on a mouse button or enter the canvas respectively, so we set the position to start drawing the line.

The resize event is triggered when we change the screen size, and we need to listen to that to change the canvas size to match the screen.

In the script tag, we have the data method that returns the pos reactive property that we use to store the mouse position.

The setPosition method sets this.pos to the current position of the mouse.

The resize method gets the canvas and set the width and height of the canvas respectively.

We resize it so that the mouse position matches the canvas position when we draw.

The draw method does the drawing.

We only draw when we click on the left mouse button, and we check that by checking if e.buttons is 1.

Then we get the canvas and the mouse position from this.pos .

We call beginPath to start drawing.

lineWidth sets the line width.

lineCap sets the line end style.

strokeStyle sets the color of the line.

moveTo moves the cursor to the given position.

lineTo draws the line to the given position.

stroke renders the line drawn.

In the style tag, we set the border so that we can see where the canvas is.

Conclusion

We can create a drawing app easily with Vue 3 and JavaScript.