You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
constcanvas=document.querySelector('canvas')canvas.width=window.innerWidthcanvas.height=window.innerHeightconstctx=canvas.getContext('2d')functiondrawLine(ctx,line){const{
start,
end,
lineWidth =20,
lineCap ='round',
strokeStyle ='white',}=lineif(!start||!end){thrownewError('Start or end of line not defined.')}ctx.beginPath()ctx.moveTo(start.x,start.y)ctx.lineTo(end.x,end.y)ctx.lineWidth=lineWidthctx.lineCap=lineCapctx.strokeStyle=strokeStylectx.stroke()}constline={start: {x: 100,y: 100},end: {x: 100,y: 200},lineWidth: 50,strokeStyle: 'blue'}drawLine(ctx,line)
3. Drawing Points on mouse click
constcanvas=document.querySelector('canvas')canvas.width=window.innerWidthcanvas.height=window.innerHeightconstctx=canvas.getContext('2d')functiondrawLine(ctx,line){const{
start,
end,
lineWidth =20,
lineCap ='round',
strokeStyle ='white',}=lineif(!start||!end){thrownewError('Start or end of line not defined.')}ctx.beginPath()ctx.moveTo(start.x,start.y)ctx.lineTo(end.x,end.y)ctx.lineWidth=lineWidthctx.lineCap=lineCapctx.strokeStyle=strokeStylectx.stroke()}document.addEventListener('mousedown',function(e){constposition={x: e.clientX-canvas.offsetLeft,y: e.clientY-canvas.offsetTop}constline={start: position,end: position,lineWidth: 100}drawLine(ctx,line)})
4. Drawing a line on mouse drag
constcanvas=document.querySelector('canvas')canvas.width=window.innerWidthcanvas.height=window.innerHeightconstctx=canvas.getContext('2d')functiondrawLine(ctx,line){const{
start,
end,
lineWidth =20,
lineCap ='round',
strokeStyle ='white',}=lineif(!start||!end){thrownewError('Start or end of line not defined.')}ctx.beginPath()ctx.moveTo(start.x,start.y)ctx.lineTo(end.x,end.y)ctx.lineWidth=lineWidthctx.lineCap=lineCapctx.strokeStyle=strokeStylectx.stroke()}letisPressed=false;letmouseDownPos=nulldocument.addEventListener('mousedown',function(e){isPressed=truemouseDownPos={x: e.clientX-canvas.offsetLeft,y: e.clientY-canvas.offsetTop}constline={start: mouseDownPos,end: mouseDownPos,}drawLine(ctx,line)})document.addEventListener('mouseup',function(){isPressed=false})document.addEventListener('mousemove',function(e){if(isPressed){letcurrentPos={x: e.clientX-canvas.offsetLeft,y: e.clientY-canvas.offsetTop}letline={start: mouseDownPos,end: currentPos}ctx.clearRect(0,0,canvas.width,canvas.height)drawLine(ctx,line)}})
5. Restructering Mouse Code
constcanvas=document.querySelector('canvas')canvas.width=window.innerWidthcanvas.height=window.innerHeightconstctx=canvas.getContext('2d')functiondrawLine(ctx,line){const{
start,
end,
lineWidth =20,
lineCap ='round',
strokeStyle ='white',}=lineif(!start||!end){thrownewError('Start or end of line not defined.')}ctx.beginPath()ctx.moveTo(start.x,start.y)ctx.lineTo(end.x,end.y)ctx.lineWidth=lineWidthctx.lineCap=lineCapctx.strokeStyle=strokeStylectx.stroke()}constmouse={isPressed: false,down: null,current: null,up: null,setDown: function(event,element){this.isPressed=true;this.down=this.getPosition(event,element)},setUp: function(event,element){this.isPressed=false;this.up=this.getPosition(event,element)},setCurrent: function(event,element){this.current=this.getPosition(event,element)},getPosition: function(event,element){letposition={x: event.clientX-element.offsetLeft,y: event.clientY-element.offsetTop}returnposition}}functionhandleMouseDown(e){mouse.setDown(e,canvas)constline={start: mouse.down,end: mouse.down,}drawLine(ctx,line)}functionhandleMuseUp(e){mouse.setUp(e,canvas)}functionhandleMouseMove(e){if(mouse.isPressed){mouse.setCurrent(e,canvas)letline={start: mouse.down,end: mouse.current}ctx.clearRect(0,0,canvas.width,canvas.height)drawLine(ctx,line)}}document.addEventListener('mousedown',handleMouseDown)document.addEventListener('mouseup',handleMuseUp)document.addEventListener('mousemove',handleMouseMove)
6. Drawing multiple lines
constcanvas=document.querySelector('canvas')canvas.width=window.innerWidthcanvas.height=window.innerHeightconstctx=canvas.getContext('2d')functiondrawLine(ctx,line){const{
start,
end,
lineWidth =20,
lineCap ='round',
strokeStyle ='white',}=lineif(!start||!end){thrownewError('Start or end of line not defined.')}ctx.beginPath()ctx.moveTo(start.x,start.y)ctx.lineTo(end.x,end.y)ctx.lineWidth=lineWidthctx.lineCap=lineCapctx.strokeStyle=strokeStylectx.stroke()}constmouse={isPressed: false,down: null,current: null,up: null,setDown: function(event,element){this.isPressed=true;this.down=this.getPosition(event,element)},setUp: function(event,element){this.isPressed=false;this.up=this.getPosition(event,element)},setCurrent: function(event,element){this.current=this.getPosition(event,element)},getPosition: function(event,element){letposition={x: event.clientX-element.offsetLeft,y: event.clientY-element.offsetTop}returnposition}}functionclearCanvas(ctx){ctx.clearRect(0,0,canvas.width,canvas.height)}constlines=[]functiondraw(){clearCanvas(ctx)lines.forEach(function(line){drawLine(ctx,line)})}functionhandleMouseDown(e){mouse.setDown(e,canvas)constline={start: mouse.down,end: mouse.down,}lines.push(line)draw()}functionhandleMuseUp(e){mouse.setUp(e,canvas)}functionhandleMouseMove(e){if(mouse.isPressed){mouse.setCurrent(e,canvas)letline={start: mouse.down,end: mouse.current}lines.pop()lines.push(line)draw();}}document.addEventListener('mousedown',handleMouseDown)document.addEventListener('mouseup',handleMuseUp)document.addEventListener('mousemove',handleMouseMove)
6. Drawing multiple lines
constcanvas=document.querySelector('canvas')canvas.width=window.innerWidthcanvas.height=window.innerHeightconstctx=canvas.getContext('2d')functiondrawLine(ctx,line){const{
start,
end,
lineWidth =20,
lineCap ='round',
strokeStyle ='white',}=lineif(!start||!end){thrownewError('Start or end of line not defined.')}ctx.beginPath()ctx.moveTo(start.x,start.y)ctx.lineTo(end.x,end.y)ctx.lineWidth=lineWidthctx.lineCap=lineCapctx.strokeStyle=strokeStylectx.stroke()}constmouse={isPressed: false,down: null,current: null,up: null,setDown: function(event,element){this.isPressed=true;this.down=this.getPosition(event,element)},setUp: function(event,element){this.isPressed=false;this.up=this.getPosition(event,element)},setCurrent: function(event,element){this.current=this.getPosition(event,element)},getPosition: function(event,element){letposition={x: event.clientX-element.offsetLeft,y: event.clientY-element.offsetTop}returnposition}}constlines=[]functiondraw(){ctx.clearRect(0,0,canvas.width,canvas.height)lines.forEach(function(line){drawLine(ctx,line)})}functionhandleMouseDown(e){mouse.setDown(e,canvas)constline={start: mouse.down,end: mouse.down,}lines.push(line)draw()}functionhandleMuseUp(e){mouse.setUp(e,canvas)}functionhandleMouseMove(e){if(mouse.isPressed){mouse.setCurrent(e,canvas)letline={start: mouse.down,end: mouse.current}lines.pop()lines.push(line)draw()}}document.addEventListener('mousedown',handleMouseDown)document.addEventListener('mouseup',handleMuseUp)document.addEventListener('mousemove',handleMouseMove)
7. Drawing with requestAnimationFrame
constcanvas=document.querySelector('canvas')canvas.width=window.innerWidthcanvas.height=window.innerHeightconstctx=canvas.getContext('2d')functiondrawLine(ctx,line){const{
start,
end,
lineWidth =20,
lineCap ='round',
strokeStyle ='white',}=lineif(!start||!end){thrownewError('Start or end of line not defined.')}ctx.beginPath()ctx.moveTo(start.x,start.y)ctx.lineTo(end.x,end.y)ctx.lineWidth=lineWidthctx.lineCap=lineCapctx.strokeStyle=strokeStylectx.stroke()}constmouse={isPressed: false,down: null,current: null,up: null,setDown: function(event,element){this.isPressed=true;this.down=this.getPosition(event,element)},setUp: function(event,element){this.isPressed=false;this.up=this.getPosition(event,element)},setCurrent: function(event,element){this.current=this.getPosition(event,element)},getPosition: function(event,element){letposition={x: event.clientX-element.offsetLeft,y: event.clientY-element.offsetTop}returnposition}}constlines=[]functiondraw(){ctx.clearRect(0,0,canvas.width,canvas.height)lines.forEach(function(line){drawLine(ctx,line)})}functionhandleMouseDown(e){mouse.setDown(e,canvas)constline={start: mouse.down,end: mouse.down,}lines.push(line)}functionhandleMouseUp(e){mouse.setUp(e,canvas)}functionhandleMouseMove(e){if(mouse.isPressed){mouse.setCurrent(e,canvas)letline={start: mouse.down,end: mouse.current}lines.pop()lines.push(line)}}document.addEventListener('mousedown',handleMouseDown)document.addEventListener('mouseup',handleMouseUp)document.addEventListener('mousemove',handleMouseMove)window.requestAnimationFrame(functionloop(){draw()window.requestAnimationFrame(loop)})