FX

How-To's > How do I work with fills and strokes?

Find the answers to your questions.

• How do I fill a shape with solid color?
• How do I add a stroke to a shape?
• How do I keep the same stroke width while scaling the object?

Related How-To Topics

• How do I work with shapes?
• How do I create a linear gradient?
• How do I create a radial gradient?

How do I fill a shape with solid color?

Use the fill variable to fill the interior of a shape with a solid color. Any node that inherits variables from the javafx.scene.shape.Shape class can use the fill variable. To define the color, use the javafx.scene.paint.Color class.

Example Code

The following screen capture and code show examples of solid-color fills for several types of shapes.

Rectangle {
    x:10,
    y:20,
    width: 50,
    height: 40
    fill: Color.SLATEGREY
}
Circle {
    centerX:130
    centerY:35
    radius:30
    fill: Color.web("#1F6592")
}
Text {
    x:30
    y:100
    font: Font {size:24}
    fill: Color.web("#1F6592")
    content: "Solid Fill"
}

Tips

• There are several types of color information you can use. For more information, see the API documentation for the Color class.
• Fills can contain a linear or radial gradient as well as a solid color.
• The default fill color is black for all shapes except Line, Polyline, and Path. The default fill value is null for those shapes.

Examples

• Building GUI Applications With JavaFX, Lesson 2: Using Declarative Syntax
• Animating a Red Ball to Show Acceleration Force Changes
  In this sample, a ball is filled with a solid red color.

API Documentation

• Shape
• Color

How do I add a stroke to a shape?

Use the stroke variable to create a line that straddles the outline of a shape. Any node that inherits variables from the javafx.scene.shape.Shape class can use the stroke variable. To define the color, use the javafx.scene.paint.Color class. To vary the width of the stroke, use the strokeWidth variable.

Example Code

The following code shows examples of strokes and stroke widths for several types of shapes.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;

Stage {
    title: "Strokes"
    width: 600
    height: 600
    scene: Scene {
        content: [
            Rectangle {
                x:10,
                y:20,
                width: 50,
                height: 40
                fill: null
                stroke: Color.SLATEGREY
                strokeWidth:1
                
            }
            Circle {
                centerX:130
                centerY:45
                radius:30
                stroke: LinearGradient {
                    startX: 125.0, startY: 0.0, endX: 225.0, endY: 0.0
                    proportional: false
                    stops: [
                        Stop { offset: 0.0 color: Color.web("#1F6592") }
                        Stop { offset: 1.0 color: Color.web("#80CAFA") }
                    ]
                }
                strokeWidth:20
            }
            Text {
                x:20
                y:130
                content: "Stroke"
                font: Font {size:48}
                stroke: Color.web("#1F6592")
                strokeWidth:2
                fill: null
            }
        ]
     }
 }
 

Tips

• Because the code for the circle in the example does not specify a fill, the default fill color is black.
• The stroke variable can contain a linear or radial gradient as well as a solid color. The circle in the first example code has a linear gradient.
• The default value for the stroke variable is null for all shapes except Line, Polyline, and Path. The default value is Color.BLACK for the latter shapes.
• The default stroke width is one pixel. Stroke widths greater than one pixel straddle the original outline of the shape. This means that shapes with a stroke width greater than one pixel have a larger actual height, width, or radius than the values specified for the height, width, or radius variables for the shape. In the following example, the rectangle on the left has the default stroke width of one pixel and null stroke color. The rectangle on the right has the variable strokeWidth:5, which makes the outer edges of the rectangle display two pixels left and two pixels higher. This result occurs even though the x and y coordinates of the rectangle are identical to those of the rectangle on the left.
  
  
  

  import javafx.stage.Stage;
  import javafx.scene.Scene;
  import javafx.scene.paint.Color;
  import javafx.scene.shape.Rectangle;
  import javafx.scene.shape.Line;
  
  Stage {
      title: "Strokes"
      width: 100
      height: 120
      scene: Scene {
          content: [
              Line {
                  startX:30
                  startY:10
                  endX:30
                  endY:80
                  stroke:Color.RED
              }
              Line {
                  startX:15
                  startY:20
                  endX:100
                  endY:20
                  stroke:Color.RED
              }
              Rectangle {
                  x:30,
                  y:20,
                  width: 50,
                  height: 40
                  fill: Color.GRAY
                  /* The following two lines apply
                     to the rectangle on the right. */
                  //stroke: Color.BLACK
                  //strokeWidth:5
              }
          ]
       }
   }
  

Examples

• Building GUI Applications With JavaFX, Lesson 2: Using Declarative Syntax

API Documentation

• Node

How can I keep the same stroke width while scaling the object?

When you scale a node by using scaleX and scaleY variables of the Node class, the stroke width automatically scales also. To scale the object but keep the stroke the original width, divide the stroke width by the scale factor.

Example Code

In the following screen capture and code, the blue rectangle is scaled by a factor of four to become the red rectangles. In the red rectangle to the left, the strokeWidth variable is still defined as one pixel, but it is scaled to four pixels. In the red rectangle to the right, the strokeWidth variable is divided by the scale factor, which preserves the original stroke width of one pixel.

Rectangle {
    x: 40
    y: 30
    strokeWidth: 1.0
    stroke:Color.BLUE
    height: 10
    width: 10
    fill: null
}
Rectangle {
    x: 100
    y: 120
    def scale = 4;
    scaleX: scale
    scaleY: scale
    stroke:Color.RED
    strokeWidth: 1.0
    height: 40
    width: 40
    fill: null
}
Rectangle {
    x: 120
    y: 140
    def scale = 4;
    scaleX: scale
    scaleY: scale
    strokeWidth: 1.0 / scale
    stroke:Color.RED
    height: 40
    width: 40
    fill: null
} 
  

API Documentation

• scaleX and scaleY variables in Node

Last Updated: November 2009
[Return to How-To's Home]

---

Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.