1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < title > HTML5 Canvas</ title >
7+ </ head >
8+
9+ < body >
10+ < canvas id ="draw " width ="800 " height ="800 "> </ canvas >
11+ < script >
12+ const canvas = document . querySelector ( '#draw' ) ;
13+ canvas . width = window . innerWidth ;
14+ canvas . height = window . innerHeight ;
15+
16+ const ctx = canvas . getContext ( '2d' ) ;
17+ ctx . lineJoin = 'round' ;
18+ ctx . lineCap = 'round' ;
19+ //ctx.globalCompositeOperation = 'overlay';
20+
21+
22+ let isDrawing = false ;
23+ let lastX = 0 ;
24+ let lastY = 0 ;
25+ let hue = 0 ;
26+ let direction = true ;
27+
28+
29+
30+
31+ function draw ( event ) {
32+ if ( ! isDrawing ) return ;
33+ console . log ( event ) ;
34+ ctx . beginPath ( ) ;
35+ ctx . moveTo ( lastX , lastY ) ;
36+ ctx . lineTo ( event . offsetX , event . offsetY ) ;
37+ ctx . stroke ( ) ;
38+ ctx . strokeStyle = `hsl(${ hue } ;
39+ // destructuring an array
40+ [ lastX , lastY ] = [ event . offsetX , event . offsetY ] ;
41+ hue ++ ;
42+ if ( hue >= 360 ) {
43+ hue = 0 ;
44+ }
45+ if ( ctx . lineWidth >= 100 || ctx . lineWidth <= 1 ) {
46+ direction = ! direction ;
47+ }
48+ if ( direction === true ) {
49+
50+ ctx . lineWidth ++ ;
51+ } else {
52+ ctx . lineWidth -- ;
53+ }
54+
55+
56+ }
57+
58+ document . addEventListener ( 'mousemove' , draw ) ;
59+ document . addEventListener ( 'mousedown' , ( event ) => {
60+ isDrawing = true ;
61+ [ lastX , lastY ] = [ event . offsetX , event . offsetY ] ;
62+ } ) ;
63+ document . addEventListener ( 'mouseup' , ( ) => isDrawing = false ) ;
64+ document . addEventListener ( 'mouseout' , ( ) => isDrawing = false ) ;
65+ </ script >
66+
67+ < style >
68+ html ,
69+ body {
70+ margin : 0 ;
71+ }
72+ </ style >
73+
74+ </ body >
75+
76+ </ html >
0 commit comments