Attributes

• The goal for these notes.
• Attributes are modifications to the basic shapes.
  • Color and transparency
  • Line width and style.
  • Descriptions of how lines "end" and "join"
  • Fonts to use for text.
• For simple graphics packages these are limited.
• For other packages there is a large selection.
• In some packages these are associated with a single primitive.
• In other packages they are persistent until changed.
• The implementer of the graphics package provides the attributes as well as the primitives.
• In more complex packages, you are able to "add" attributes.
• I do not intend to cover all of the attributes for the HTML5 Canvas.
  • You really should be able to learn that on your own.
  • They are described
    • here for shapes
    • here for text.
• Color
  • In HTML colors can be specified many different ways
    • A set of keyword strings ("red", "BlUe")

    • ctx.fillStyle = "red";
      

    • A set of RGB colors #FF0000 or #0F0

    • ctx.strokeStyle = "#0F0";
      

    • A function call "RGB(255, 0, 255)" with numbers.

    • ctx.fillStyle = 'RGB(100%,70%,50%)';
      

    • A function call "RGB(50%, 50%, 100%)" with percents.

    • ctx.fillStyle = 'RGB(148,129,256)';
      

    • Caution: don't mix numbers and percent.
    • Or even a bit more complex.

    • let red = 25;
      let green = 150;
      let blue = 150;
      
      ctx.fillStyle = "RGB(" + red +","+ green+","+ blue + ")";
      

  • We will discuss RGB colorspace in the future.
  • Another colorspace is HSL
    • Hue, an angle from 0 to 360 or 2π specifying "color"
      • 30deg for degrees, or nothing
      • 3.2rad for radians
    • Saturation, a value from 0% to 100%
    • Lightness, a value from 0% to 100%

    •    ctx.fillStyle = "hsl(3rad, 90%, 50%)";
         ctx.fillRect(120,120,20,20);
      
         for(let angle = 0; angle < 360; angle+= 30) {
             ctx.fillStyle="hsl("+angle + ", 90%, 50%)";
             ctx.fillRect(angle, 150,20, 20);
         }
      
         let x = 0;
         for(let pct =0; pct < 100; pct+= 10) {
             ctx.fillStyle="hsl(120deg, " + pct + "%, 50%)";
             ctx.fillRect(x, 180,20, 20);
             x += 30;
         }
      
         x = 0;
         for(let pct =0; pct < 100; pct+= 10) {
             ctx.fillStyle="hsl(200, 100%," +pct +"%)";
             ctx.fillRect(x, 210,20, 20);
             x += 30;
         }
      

    • See the demo
• Lines have several attributes
  • lineWidth is self explanatory
  • lineCap and lineJoin impact the ends and corners of a line
  • setLineDash, getLineDash and lineDashOffset change from a solid line to a dashed line.
• Text
  • There are many attributes for text.
  • A quick demo

  • // reset the line dash
    ctx.setLineDash( [0]);
    
    // orange 40 pixel sans-serif text
    ctx.strokeStyle = "orange";
    ctx.font="40px sans-serif";
    
    // measure how long, in pixels the string will be.
    var text = ctx.measureText("Graphics");
    
    // draw it.
    ctx.strokeText("Graphics", 10, 300);
    
    // change to a serif text in green
    ctx.font="40px serif";
    ctx.strokeStyle = "green";
    
    // make sure to add the offset of the first word
    ctx.strokeText(" is fun!", 10+text.width, 300);