How to Use the Interactive Canvas to Build Tactical Diagrams

Intro

The Draw Tool is your interactive canvas for designing soccer drills and tactical exercises from scratch. Instead of searching for the perfect pre-made drill, you can drag and drop players, draw movement lines, place cones and goals, and let the AI help you refine your idea. This guide walks you through the core canvas features - placing objects, snapping them to grid, and generating a legend - so you can turn your tactical vision into a shareable diagram.

Prerequisites

• Access to the Draw Tool page at /draw (public page, no account required to view; authenticated users can save diagrams)
• A desktop or tablet browser with JavaScript enabled (the canvas uses React Konva)
• (Optional) A BallersBook account if you want to save or copy drills to your club library

Step-by-step

1. Open your browser and navigate to the Draw Tool by visiting /draw directly or by clicking Drill Library in the navigation and then selecting New Drill (if you have the manage_drills permission). If you are a guest, you will be automatically signed in anonymously.

2. Once on the canvas, you will see a blank grid area and a toolbar on the left or top. Click the Player icon (a small jersey shape) to add a player to the field. Each player appears as a numbered circle that you can drag anywhere on the canvas.

3. To draw movement or passing lines, click the Line tool in the toolbar. Then click and drag on the canvas to create a line. Release the mouse to set the endpoint. Repeat to add arrows or curved paths.

💡 Tip: Hold the Shift key while drawing to snap the line to 45-degree or 90-degree angles.

4. Add equipment like cones, goals, or flat markers by selecting the Equipment palette. Choose Cone, Goal, or Marker and click on the canvas to place it. You can resize equipment objects by dragging their corner handles.

5. Enable Snap to Grid by clicking the Snap toggle in the toolbar (usually a magnet icon). When active, all objects will automatically align to the nearest grid intersection, making your diagram clean and symmetrical.

6. To generate a legend automatically, click the Legend button (often an “L” icon or a text label button). The Draw Tool will scan all objects on the canvas and create a numbered legend box that maps each player or piece of equipment to its role or label. You can reposition the legend by dragging it.

7. Once your diagram is complete, you have several options:

• Save to Drills: If you are logged in with manage_drills permission, click Save Drill (top right) to store it in your club’s drill library.
• Copy Drill: Click Copy Drill to duplicate the diagram as a new drill (guest users will be prompted to sign up).
• Export: Use the Export button to download the canvas as an image (PNG) or PDF (if your browser supports it).

Tips & Pitfalls

• Layer order matters: Players you add later appear on top. Use the Bring to Front / Send to Back options (right-click on an object) to reorder layers.
• Undo mistakes: The canvas supports Undo (Ctrl+Z / Cmd+Z) and Redo (Ctrl+Shift+Z). Use them frequently.
• Guest limits: Anonymous users can create up to three AI-generated diagrams per day (configured by your club admin). Manual drawing is unlimited.
• Saving a copy: If you want to reuse a diagram in multiple drills, always use Copy Drill instead of rebuilding from scratch.
• Avoid overcrowding: Stick to 10-12 players per diagram for readability. Use the Zoom slider at the bottom of the canvas to see the whole field.

Summary

The Draw Tool gives you a flexible canvas to design tactical diagrams with players, lines, equipment, and automatic legends. By mastering snapping and the toolbar, you can produce clear, professional drills in minutes. Next, try sharing your finished diagram with your team by saving it as a drill and including it in a session plan.