How to draw tick on an image using vue js

/ CSS, HTML, Javascript, Scripting, Vue

Create two css class draw to give white background box on which we will draw the check or dot and get the X and Y coordinates.

        .draw{
             background: white;
             width: 20vw;
             height: 20vw;
             border-style: solid;
             margin:auto;
             margin-bottom: 10px;
         }
         .center {
             text-align:center;
         }

Link Vue Js CDN to use Vue framework

Create an instance of Vue and create app id

new Vue({
 el: "#app",

Now create drawDot() and drawCheck() methods to add Check or Dot and create styles.

Here is the final code after combining all above steps:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=!, initial-scale=1.0">
    <title>Draw a check or Dot using Vue JS</title>
    <style>
        .draw{
            background: white;
            width: 20vw;
            height: 20vw;
            border-style: solid;
            margin:auto;
            margin-bottom: 10px;
        }
        .center {
            text-align:center;
        }
    </style>

</head>
<body>

    <div id="app">
         <p class="center"> Draw Check</p>
         <div  class="draw" @click="drawCheck"></div>
         <p class="center"> Draw Dot</p>
         <div class="draw" @click="drawDot"></div>
    </div>
    
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

    <script type="text/javascript">
    new Vue({
     el: "#app",
    
     methods:{

            drawDot(){
                mouseX = event.pageX;
                mouseY = event.pageY
                console.log(mouseX + ' ' + mouseY);
                let div = document.createElement("div");  
                div.style.position ='absolute';
                div.style.top = mouseY + 'px';
                div.style.left = mouseX + 'px';
                div.style.width = '5px';
                div.style.height = '5px';
                div.style.backgroundColor = '#78b13f';
                document.body.appendChild(div)
            },

            drawCheck(){
                mouseX = event.pageX;
                mouseY = event.pageY
                console.log(mouseX + ' ' + mouseY);
                let div = document.createElement("div");
                div.style.position ='absolute';  
                div.style.transform ='rotate(45deg)';
                div.style.height = '20px';
                div.style.width ='10px';
                div.style.margin = 'auto'; 
                div.style.borderBottom = '5px solid #78b13f';
                div.style.borderRight ='5px solid #78b13f';
                div.style.top=mouseY + 'px';
                div.style.left=mouseX + 'px';
                document.body.appendChild(div)
            }
            
        }
    });
    </script>
</body>
</html>