Canvas doodle board

Canvas can draw graphics, lines, text, add and save pictures and other functions, which can help us make some visual graphics, special effects, games and so on.

Today I will simply make a doodle board using canvas.

The Canvas Doodle board can automatically doodle, customize the background image, add text content, change the color of the brush, save the doodle picture and other functions.

implementation

Draw function

Doodle board to achieve some functions:

Brush colors, size Settings, eraser, text editing, Clear canvas, Undo, redo, save pictures.

const init=(ref,defCfg,imgRef,imgUrl) = >{
  setCfg(defCfg);
  imgUrl&&loadImg(imgRef,imgUrl,ref);
  const destroy=initStart(ref,startEvent,moveEvent,endEvent);
  return {
    destroy,
    color:value= >setCfg({color:value,type:'draw'}),
    size:value= >setCfg({size:value,type:'draw'}),
    eraser:() = >setCfg({type:'eraser'}),
    text:() = >setCfg({type:'text'}),
    clean:() = >{clearRect(ref); setCfg({type:'draw'}); },undo:() = >prev(ref),
    redo:() = >next(ref),
    save:name= >dlfile(ref.toDataURL(),name),
  };
};

Copy the code

SetCfg is mainly used for Settings

• The current brush type includes draw, eraser and text
• Brush color: custom
• Brush size: custom

LoadImg is used to load the background image we defined.

Mouse or touch event listener

Determines whether touch events are supported.

const eventTargets=() = >isTouch? {startEvt:'touchstart'.moveEvt:'touchmove'.endEvent:'touchend',
}:{
  startEvt:'mousedown'.moveEvt:'mousemove'.endEvt:'mouseup'};Copy the code

Listen for an event

const initStart=(startEvt,ref,startEvent) = >{
  ref.addEventListener(startEvt,startEvent,false);
};
const destroyStart=(startEvt,ref,startEvent) = >{
  ref.removeEventListener(startEvt,startEvent,false);
};
const handleStart=(moveEvt,endEvt,ref,moveEvent,endEvent) = >{
  ref.addEventListener(moveEvt,moveEvent,false);
  document.addEventListener(endEvt,endEvent,false);
};
const handleEnd=(moveEvt,endEvt,ref,moveEvent,endEvent) = >{
  ref.removeEventListener(moveEvt,moveEvent,false);
  document.removeEventListener(endEvt,endEvent,false);
};

Copy the code

Create a picture

const createImg=(canvas,url) = >{
  const {width,height}=canvas;
  const ctx=canvas.getContext('2d');
  const img=new Image();
  img.src=url;
  img.onload=function(){
    ctx.drawImage(img,0.0,width,height);
  };
  return img;
};

Copy the code

Drawing process

According to the type of type to determine the current brush to perform the operation, there are three kinds of draw, eraser, write text. Text authoring is triggered in the endEvent function.

const moveEvent=(evt,canvas) = >{
  evt.preventDefault();
  const ctx=canvas.getContext('2d');
  const {x,y}=getRelative(evt,canvas);
  const type=getCfg('type');
  const size=getCfg('size');
  if(type==='draw') {const color=getCfg('color');
    ctx.lineWidth=size;
    ctx.strokeStyle=color;
    ctx.lineTo(x,y);
    ctx.stroke();
  }else if(type==='eraser'){
    ctx.lineWidth=size;
    ctx.clearRect(x-size*10,y-size*10,size*20,size*20); }};Copy the code

To add text

const drawText=(evt,canvas) = >{
  const ctx=canvas.getContext('2d');
  const {touchX,touchY}=getTouchPosition(evt);
  const {left,top,right,bottom}=canvas.getBoundingClientRect();
  const textArea=createNote(touchX,touchY,right,bottom);
  textArea.focus();
  textArea.addEventListener('blur'.event= >{
    const txt=textArea.value;
    ctx.font='12px Microsoft Yahei ';
    ctx.fillStyle='red';
    ctx.fillText(txt,touchX-left,touchY-top);
    removeNote(textArea);
  },false);
};

Copy the code

The createNote function creates an extarea based on the click position and uses focus or blur to control the creation or destruction of the textarea.

Undo and redo

import {utils} from '@common';
const {record,undo,redo}=cacheData();

Copy the code

Record records data, undo retrieves the last record of the current data, and redo retrieves the next record of the current data

Save the picture

const saveData=canvas= >record(canvas.toDataURL());

Copy the code

So, a simple doodle board comes out.

The online demo