Υποενότητα 10.1: Στοιχείο HTML Canvas

Εδώ θα αρχίσουμε να σχεδιάζουμε πραγματικά στον καμβά μας. Το πρώτο βήμα είναι να μάθουμε πώς να σχεδιάζουμε μια γραμμή.

Ο κώδικας JavaScript που θα χρειαστεί για αυτό είναι:

/* draw lines between opposite corners to make an X: */
/*Let's set some styles */
context0.strokeStyle = "red";
context0.lineWidth = "2";
/* call beginPath() to start the drawing path*/
context0.beginPath();
/* call moveTo() to position the pen at the starting point at one corner*/
context0.moveTo(0, 0);
/* call lineTo() to define a line to the opposite corner*/
context0.lineTo(context0.canvas.width, context0.canvas.height);
/* call moveTo() to position the pen at the starting point at one corner*/
context0.moveTo(context0.canvas.width, 0);
/* call lineTo() to define a line to the opposite corner*/
context0.lineTo(0, context0.canvas.height);
/* call stroke() to draw it */
context0.stroke();

τα παραπάνω θα δημιουργήσουν δύο γραμμές που εμφανίζονται ως "Χ" στον καμβά μας: