iamrjrahul

  < div class = "info" >     < p id = "points-info" > No points yet </ p > </ div > < div class = "output" >     < img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" width = "500" height = "500" >     < canvas id = "canvas" width = "500" height = "500" ></ canvas >     < p id = "coordinates" ></ p > </ div > < button id = "show-canvas-btn" > Show Canvas </ button > < style > canvas {     width : 500px ;     height : 500px ;     display : none ;     border : 3px solid #333 ;     background-size : cover ;     cursor : crosshair ; } </ style > < script > var canvas = document . getElementById ( 'canvas' ); var ctx = canvas . getContext (

  < div class = "info" >     < p class = "points-info" > No points yet </ p >     < input type = "text" placeholder = "Image URL" > </ div > < div class = "output" >         < canvas id = "canvas" width = "500" height = "500" style = " border: 1px solid black;" ></ canvas > < p id = "coordinates" ></ p > </ div > < style > canvas {     width : 500px ;     height : 500px ;     display : inline-block ;     border : 3px solid #333 ;     background-size : cover ;     cursor : crosshair ; } .zoom {     width : 100px ;     height : 100px ;     border : 3px solid #333 ;     background-size : fill ;     border-radius : 50px ;     cursor : crosshair ; } .magnify {     width : 100px ;     height : 100px ;     background : black ;     background-size : 400% ;     border : 2px solid #333 ; } .magnify-dot {