GraphicsWindow Basics – Small Basic Featured Article

Check out this classic article from :


Small Basic: GraphicsWindow Basics


Table of Contents




Here's an excerpt about moving shapes:

The position of a shape is defined by a bounding box. The bounding box is a rectangle that completely covers the shape when it was created. The position of the shape on the canvas is defined by the top left corner of the bounding box. The bounding box has a width and height which corresponds to the size set when the shape was created.

  • If a shape has width w and height h, then to position a shape with its centre at (x,y), we need to set the top left corner at (x-w/2,y-h/2).
  • Note that when a rotated or zoomed shape is moved it appears as if the rotation or zoom was performed after the positioning movement – the position is the top left corner of the un-rotated and un-zoomed bounding box.


I love how the Wiki is always evolving! This article was written in 2012, but in March of this year, Yan translated it into French:


 Small Basic - Les Bases : La Fenêtre Graphique GraphicsWindow (fr-FR)


Special thanks to Yan for translating and to LitDev for this timeless article!


Small and Basically yours,

   - Ninja Ed


Comments (10)

  1. Also, check out the comments in the Wiki article! It's fun to see the conversations that happen there:…/15059.small-basic-graphicswindow-basics.aspx

  2. anonymouscommenter says:

    3d cubes expander MDT714

    move red square by dragging

    then use mousewheel to expand/shrink cubes dist.

    can be used to explain space expansion))

  3. anonymouscommenter says:

    advanced 3d cubes FZF052

    more speed n options!

  4. anonymouscommenter says:

    Hey thanks!

    Mr. Price and litdev both of you thanks for this article. I needed an article on how to do graphics. sprites etc.!

  5. anonymouscommenter says:

    moon/sun motion: VRG084

    -use rightmousebutton to adjust opts

    -mousewheel fine regulates moon speed

  6. anonymouscommenter says:

    now unleash ur creativity: BGM830

    5 objects can be added, select active obj. by key 1..5 (not num. or Fn keys!)

    then choose by mouse right button the module size 1-5. after addition move the positioning square. square is overlapped by 3d boxex but can be selected anyway. Enjoy!

  7. Jibba Jabba says:

    An oldie but a goodie. A classic article. You need to know this stuff in order to write small tight games.

  8. anonymouscommenter says:

    more cooler options and many bug fixes: CGG318

  9. These are great programs! I'm glad to see you learning and improving, qwx!

    That's awesome!

  10. Jibba Jabba, yeah, right? I'm surprised we hadn't featured it yet. But it's stood the test of time and has been super helpful to a ton of people!

Skip to main content