{% extends "labs/template-slim.html" %} {% block pagecss %} {{ js_css_packages.css_package("bootstrap") }} {{ js_css_packages.css_package("canvas-editor") }} {% endblock pagecss %} {% block pagecontent %}

Code Scratchpad

Documentation

Shapes

  • point(x, y);
    Draw a single point on the drawing.
  • line(x1, y1, x2, y2);
    Draw a line from one point to another.
  • rect(x1, y1, width, height);
    Draw a four-sided rectangle.
  • ellipse(x, y, width, height);
    Draw an ellipse (if width and height are equal, a circle!).
  • triangle(x1, y1, x2, y2, x3, y3);
    Draw a three-sided shape.

Text

  • text("Some text.", x, y);
    Display some text at a certain position.
  • textSize(num);
    How large the text should be.
  • textWidth("Some text.");
    Calculates how wide the text is.

Colors and Stoke

  • stroke(red, green, blue);
    Set the color for lines and shape borders.
  • strokeWeight(size);
    Set the width of lines and shape borders.
  • fill(red, green, blue);
    Set the color of the insides of shapes.
  • background(red, green, blue);
    Set the background color of the entire drawing.

Events

  • var draw = function() { };
    Draw function which is called over-and-over.
  • mousePressed
    Is true if the mouse is being pressed.
  • mouseX
    The X position of the mouse on the drawing.
  • mouseY
    The Y position of the mouse on the drawing.

JavaScript

  • var age = 28;
    Set a value into a variable.
  • for ( var i = 1; i <= 10; i++ ) { }
    Loop through 10 numbers.
  • var move = function() { };
    Create a function named 'move'.
  • if ( age > 27 ) { }
    Check if a value is above a certain amount.

Math

sin(rad) cos(rad) tan(rad)

abs(num) round(num) floor(num) ceil(num)

pow(num) sqrt(num) log(num)

random(low, high)

More Details

{% endblock pagecontent %} {% block bottompagescript %} {{ js_css_packages.js_package("canvas-editor-exercise") }} {% endblock bottompagescript %}