Rita på canvas

En av de allra viktigaste funktionerna, som dessutom saknas i alla kommersiella varianter so Google Classroom osv., är att låta eleverna rita på bilder.

* Läraren lägger in en bild med uppgift i en digital arbetsbok, säg en bild av Sverige med uppgiften "Ringa in platserna där Sveriges tre största städer ligger".
* Eleven öppnar sin digitala arbetsbok, tittar på uppgiften och använder mus eller pekfinger och ritar en ring runt platserna för Stockholm, Göteborg oh Malmö.
* När eleven är klar sparas bilden så att läraren kan titta på bilden senare, inklusive elevens tre ringar, för att avgöra om eleven gjort rätt.

Detta verkar enkelt, men kräver en del script för att det ska fungera.

**Rita på canvas**

Grundläggande kommandon för att använda canvas + html5 över huvud taget: https://www.w3schools.com/graphics/canvas\_intro.asp

Skapa en canvas eleven kan rita på: http://jsfiddle.net/MartinThoma/vSDTW/2/ - exemplet visar hur en elev kan rita på ett canvasobjekt på fri hand, men läraren har valt penna, pennfärg och pennbredd i förväg.

https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/ - exemplet visar hur en elev kan rita på ett canvasobjekt på fri hand, men läraren har valt penna, pennfärg och pennbredd i förväg. Författaren har lagt till vad som skiljer mellan att rita med mus jämfört med att använda fingrarna på t.ex. en iPad.

För mindre barn kan detta vara ett alternativ, men det finns en bugg. Alla streck är endera tusch eller krita. http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

**Skriva på canvas**

För äldre elever är det viktigare att kunna skriva text på bilderna. Det är lite mer avanncerat än att dra streck på fri hand.

Ett exempel är här. https://codepen.io/ahebler/pen/KzyQBZ När knappen trycks ner placeras text ur en textruta på förvald plats på bilden. Det kan vara ett bra sätt om det är viktigare vad som står än var det placeras. Det ingår även rutin för att spara och återskapa bilder från canvas utifrån base64.

En enklare version på sammma tema finns här: https://www.khanacademy.org/computer-programming/canvas-with-input/6024730041778176

Ett problem är att längre texter inte bryter vid marginalen, det kan undvikas med detta (mastodont) script: https://www.travisberry.com/2011/05/write-text-anywhere-with-html5-canvas/

**Att använda flera canvas som lager på varandra**

I många fall är det bäst att ha flera olika lager med information som går att slå på och av beroende på situation. Bara det understa lagret har bilden. lager två kan t.ex. ha instruktionerna som sedan kan klickas bort genom att lagret göms med ett knapptryck. Översta lagret blir sedan elevens svar och endast det lagret behöver sparas. På det sättet går det fortare att både spara och att läsa in det som redigerats på bilderna igen.

https://developer.ibm.com/tutorials/wa-canvashtml5layering/

Spara canvas bild till text och ladda text till bild

Elevernas resultat måste komma till dig på något vis. Endera skickas det med e-mail eller sparas i en databas. I bägge fallen är det mycket enklare om canvasens yta omvandlas till text, eftersom det är bra mycket enklare att hantera text mellan datorer än att hantera bilder.

Ett sätt är att konvertera canvasytan till en bild i base64. Det skapar en text istället för bilden. Den texten kan sparas i en databas och när du som lärare vill se vad eleven gjort är det bara att återställa texten tillbaka in i ett canvas objekt.

Här finns en genomgång för nybörjare: https://davidwalsh.name/convert-canvas-image

Här finns en diskussion kring olika problem som kan uppstå mellan jpg och png bilder: https://stackoverflow.com/questions/15685698/getting-binary-base64-data-from-html5-canvas-readasbinarystring