HTML5 ???? ???? ??? ??? ?? ????? ???? ?? ??? ??? ? ????. 1. ??? ??? ? ?? ?? ?? : ??? ??? ???? JavaScript? ?? ????? ???? ? ??, ?? ? ?? ? ???? ??????. 2. ??? ??? ?? ?? : Mousedown, MouseMove ? Mouseup ???? ??, ??? ???? ?? ????? ?????. 3. ?? ? ???? ?? ?? ?? : ?? ?? ? ?? ??? ?? ??? ?? ?? ? ??? ??? ???? ?? ? ?? ???? ????? ??? ???? ???????. 4. ??? ?? : CLEARERECT ???? ???? ???? ??? Todataurl? ??? ???? ???? ???? ? ? ????. ??? ?? ??? ????? ????? ??? ??? ?? ????? ?? ? ? ????.

????! HTML5 ???? ???? ??? ??? ?? ????? ?? ????? ???? ??? ????. Canvas? ?? ??? ??? ???? JavaScript? ?? ??? ??? ??? ? ????. ????? ?? ?? ???? ???? ?? ?? ????? ???? ??? ?????.

1. ??? ??? ? ?? ??? ??????

?? html? <canvas></canvas> ??? ???? JavaScript? ?? ???? (????)? ??? ??? ??? ? ??????.

 <canvas id = "drawingcanvas"width = "800"height = "600"> </canvas>

?? ?? JS?? ?????.

 const canvas = document.getElementById ( 'DrawingCanvas');
const ctx = canvas.getContext ( '2d');

?? ?? ??, ?? ? ?? ? ???? ?? ?? ???? ??? ? ????.

 ctx.strokestyle = '#000';
ctx.linewidth = 2;
ctx.linecap = 'round';

? ??? ??? ?? ?? ?? ??? ???? ???? ???? ?? ?? ????.

2. ??? ??? ??? ??????

???? ??? ???? ???? ?? ?? ????? ??? ???? ?????? ?? ? ?? ???? ?????? ????.

• mousedown : ?? ??? ????? ?????
• mousemove : ????? ?? ????
• mouseup / mouseleave : ?? ???

??? ??? ?? ??? ??? ????? ?? ?? ??? ?? ?? ????? ??? ????.

 isdrawing = false? ?????.
??????? = 0;
????? = 0;

canvas.addeventListener ( 'Mousedown', (e) => {
    isdrawing = true;
    [lastx, lasty] = [E.OffSetX, E.OffSety];
});

canvas.addeventListener ( 'mousemove', (e) => {
    if (! isdrawing) ??;
    ctx.beginpath ();
    ctx.moveto (Lastx, Lasty);
    Ctx.Lineto (E.OffSetX, E.OffSety);
    ctx.stroke ();
    [lastx, lasty] = [E.OffSetX, E.OffSety];
});

canvas.addeventListener ( 'mouseup', () => isdrawing = false);
canvas.addeventListener ( 'mouseleave', () => isdrawing = false);

?? ?? "???? ????? ???"? ?? ???? ??? ???????.

3. ?? ? ???? ?? ?? ??? ??????

????? ? ?? ??? ???? ?? ? ?? ??? UI ???? ?? ? ? ????.

• ?? ??? : <input type="color">
• ???? ?? ??? ?? : <input type="range" min="1" max="50">

HTML ? :

 <??> ?? : <input type = "color"id = "ColorPicker"> </label>
<??> ??? ?? : <?? ?? = "??"id = "linewidth"min = "1"max = "50"value = "2"> </label>

?? ?? JS?? ???? ??????.

 document.getElementById ( 'ColorPicker'). addEventListener ( 'Change', (e) => {
    ctx.strokestyle = e.target.value;
});

document.getElementById ( 'lineWidth'). addEventListener ( 'input', (e) => {
    ctx.linewidth = e.target.value;
});

????? ???? ??? ???? ???? ??? ??? ??? ? ????.

4. ??? ?? : ???? ???? ??? ??????.

? ? ??? ???? ??? ??? ????? ???? ????.

???? ?????.

 ?? clearcanvas () {
    ctx.clearrect (0, 0, canvas.width, canvas.height);
}

???? ?? :

 ?? saveImage () {
    const link = document.createelement ( 'a');
    link.download = 'drawing.png';
    link.href = canvas.todataurl ();
    link.click ();
}

?? ?? ???? ??? ??? ? ? ????.

????? ?? ?????. ??? ??? ?? ??????? ?? ?? ??, ?? ?? ? ?? UI ??? ?????. ???? ??? ?? ? ??? ?? ????? ???? ?, ?? ?? ??, ?? ?? ?? ?? ??? ?? ?????. ????? ??? ???? ?? ?? ??? ??, ??? ?? ? ?? ? ???? ?? ??? ???? ??? ?? ?? ?????.

? ??? HTML5 ???? ??? ??? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!