diff --git a/packages/annotations/src/canvas.ts b/packages/annotations/src/canvas.ts
index 0f2d038473..96c0d23450 100644
--- a/packages/annotations/src/canvas.ts
+++ b/packages/annotations/src/canvas.ts
@@ -115,9 +115,13 @@ export const renderAnnotationsToCanvas = <Datum>(
             })
         } else {
             ctx.font = `${theme.annotations.text.fontSize}px ${theme.annotations.text.fontFamily}`
+            ctx.textAlign = 'left'
+            ctx.textBaseline = 'alphabetic'
+
             ctx.fillStyle = theme.annotations.text.fill
             ctx.strokeStyle = theme.annotations.text.outlineColor
             ctx.lineWidth = theme.annotations.text.outlineWidth * 2
+
             if (theme.annotations.text.outlineWidth > 0) {
                 ctx.lineJoin = 'round'
                 ctx.strokeText(
diff --git a/packages/heatmap/src/HeatMapCanvas.tsx b/packages/heatmap/src/HeatMapCanvas.tsx
index 3378c4cbf9..eb18a411dc 100644
--- a/packages/heatmap/src/HeatMapCanvas.tsx
+++ b/packages/heatmap/src/HeatMapCanvas.tsx
@@ -3,7 +3,8 @@ import { getRelativeCursor, isCursorInRect, useDimensions, useTheme, Container }
 import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { useTooltip } from '@nivo/tooltip'
 import { renderContinuousColorLegendToCanvas } from '@nivo/legends'
-import { useHeatMap } from './hooks'
+import { renderAnnotationsToCanvas, useComputedAnnotations } from '@nivo/annotations'
+import { useHeatMap, useCellAnnotations } from './hooks'
 import { renderRect, renderCircle } from './canvas'
 import { canvasDefaultProps } from './defaults'
 import {
@@ -39,7 +40,7 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
     opacity = canvasDefaultProps.opacity,
     activeOpacity = canvasDefaultProps.activeOpacity,
     inactiveOpacity = canvasDefaultProps.inactiveOpacity,
-    // borderWidth = canvasDefaultProps.borderWidth,
+    borderWidth = canvasDefaultProps.borderWidth,
     borderColor = canvasDefaultProps.borderColor as HeatMapCommonProps<Datum>['borderColor'],
     enableGridX = canvasDefaultProps.enableGridX,
     enableGridY = canvasDefaultProps.enableGridY,
@@ -53,7 +54,7 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
     colors = canvasDefaultProps.colors as HeatMapCommonProps<Datum>['colors'],
     emptyColor = canvasDefaultProps.emptyColor,
     legends = canvasDefaultProps.legends,
-    // annotations = canvasDefaultProps.annotations as HeatMapCommonProps<Datum>['annotations'],
+    annotations = canvasDefaultProps.annotations as HeatMapCommonProps<Datum>['annotations'],
     isInteractive = canvasDefaultProps.isInteractive,
     // onMouseEnter,
     // onMouseMove,
@@ -98,7 +99,10 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
         hoverTarget,
     })
 
-    const theme = useTheme()
+    const boundAnnotations = useCellAnnotations(cells, annotations)
+    const computedAnnotations = useComputedAnnotations({
+        annotations: boundAnnotations,
+    })
 
     let renderCell: CellCanvasRenderer<Datum>
     if (typeof _renderCell === 'function') {
@@ -109,6 +113,8 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
         renderCell = renderRect
     }
 
+    const theme = useTheme()
+
     useEffect(() => {
         if (canvasEl.current === null) return
 
@@ -162,7 +168,7 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
                 ctx.textBaseline = 'middle'
 
                 cells.forEach(cell => {
-                    renderCell(ctx, { cell, enableLabels, theme })
+                    renderCell(ctx, { cell, borderWidth, enableLabels, theme })
                 })
             } else if (layer === 'legends' && colorScale !== null) {
                 legends.forEach(legend => {
@@ -174,17 +180,23 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
                         theme,
                     })
                 })
+            } else if (layer === 'annotations') {
+                renderAnnotationsToCanvas(ctx, {
+                    annotations: computedAnnotations,
+                    theme,
+                })
             }
         })
     }, [
         canvasEl,
-        layers,
-        cells,
+        pixelRatio,
         outerWidth,
         outerHeight,
         innerWidth,
         innerHeight,
         margin,
+        layers,
+        cells,
         renderCell,
         enableGridX,
         enableGridY,
@@ -195,10 +207,11 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
         xScale,
         yScale,
         theme,
+        borderWidth,
         enableLabels,
         colorScale,
         legends,
-        pixelRatio,
+        computedAnnotations,
     ])
 
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
diff --git a/packages/heatmap/src/canvas.tsx b/packages/heatmap/src/canvas.tsx
index 0787e3a0f0..729098b17a 100644
--- a/packages/heatmap/src/canvas.tsx
+++ b/packages/heatmap/src/canvas.tsx
@@ -3,7 +3,8 @@ import { CellCanvasRendererProps, HeatMapDatum } from './types'
 export const renderRect = <Datum extends HeatMapDatum>(
     ctx: CanvasRenderingContext2D,
     {
-        cell: { x, y, width, height, color, opacity, labelTextColor, label },
+        cell: { x, y, width, height, color, borderColor, opacity, labelTextColor, label },
+        borderWidth,
         enableLabels,
         theme,
     }: CellCanvasRendererProps<Datum>
@@ -12,11 +13,24 @@ export const renderRect = <Datum extends HeatMapDatum>(
     ctx.globalAlpha = opacity
 
     ctx.fillStyle = color
+    if (borderWidth > 0) {
+        console.log(borderWidth)
+        ctx.strokeStyle = borderColor
+        ctx.lineWidth = borderWidth
+    }
+
     ctx.fillRect(x - width / 2, y - height / 2, width, height)
+    if (borderWidth > 0) {
+        ctx.strokeRect(x - width / 2, y - height / 2, width, height)
+    }
 
     if (enableLabels) {
         ctx.fillStyle = labelTextColor
-        ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
+        ctx.font = `${theme.labels.text.fontWeight ? `${theme.labels.text.fontWeight} ` : ''}${
+            theme.labels.text.fontSize
+        }px ${theme.labels.text.fontFamily}`
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
         ctx.fillText(label, x, y)
     }
 
@@ -26,7 +40,8 @@ export const renderRect = <Datum extends HeatMapDatum>(
 export const renderCircle = <Datum extends HeatMapDatum>(
     ctx: CanvasRenderingContext2D,
     {
-        cell: { x, y, width, height, color, opacity, labelTextColor, label },
+        cell: { x, y, width, height, color, borderColor, opacity, labelTextColor, label },
+        borderWidth,
         enableLabels,
         theme,
     }: CellCanvasRendererProps<Datum>
@@ -37,13 +52,26 @@ export const renderCircle = <Datum extends HeatMapDatum>(
     const radius = Math.min(width, height) / 2
 
     ctx.fillStyle = color
+    if (borderWidth > 0) {
+        ctx.strokeStyle = borderColor
+        ctx.lineWidth = borderWidth
+    }
+
     ctx.beginPath()
     ctx.arc(x, y, radius, 0, 2 * Math.PI)
+
     ctx.fill()
+    if (borderWidth > 0) {
+        ctx.stroke()
+    }
 
     if (enableLabels) {
         ctx.fillStyle = labelTextColor
-        ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
+        ctx.font = `${theme.labels.text.fontWeight ? `${theme.labels.text.fontWeight} ` : ''}${
+            theme.labels.text.fontSize
+        }px ${theme.labels.text.fontFamily}`
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
         ctx.fillText(label, x, y)
     }
 
diff --git a/packages/heatmap/src/types.ts b/packages/heatmap/src/types.ts
index 06dddd5a32..7554d2a67f 100644
--- a/packages/heatmap/src/types.ts
+++ b/packages/heatmap/src/types.ts
@@ -94,6 +94,7 @@ export type CellComponent<Datum extends HeatMapDatum> = FunctionComponent<CellCo
 
 export interface CellCanvasRendererProps<Datum extends HeatMapDatum> {
     cell: ComputedCell<Datum>
+    borderWidth: number
     enableLabels: boolean
     theme: CompleteTheme
 }
diff --git a/packages/legends/src/canvas.ts b/packages/legends/src/canvas.ts
index acd784fe7f..2f59d88a62 100644
--- a/packages/legends/src/canvas.ts
+++ b/packages/legends/src/canvas.ts
@@ -169,7 +169,13 @@ export const renderContinuousColorLegendToCanvas = (
         height,
     })
 
+    const initialStyles = {
+        font: ctx.font,
+        textAlign: ctx.textAlign,
+        textBaseline: ctx.textBaseline,
+    }
     ctx.save()
+
     ctx.translate(x, y)
 
     const gradient = ctx.createLinearGradient(
@@ -232,4 +238,8 @@ export const renderContinuousColorLegendToCanvas = (
     }
 
     ctx.restore()
+
+    ctx.font = initialStyles.font
+    ctx.textAlign = initialStyles.textAlign
+    ctx.textBaseline = initialStyles.textBaseline
 }
diff --git a/packages/legends/src/compute.ts b/packages/legends/src/compute.ts
index 5f4b6ffa66..7b944c137f 100644
--- a/packages/legends/src/compute.ts
+++ b/packages/legends/src/compute.ts
@@ -262,10 +262,10 @@ export const computeContinuousColorsLegend = ({
     let width: number
     let height: number
 
-    const gradientX1: number = 0
-    const gradientY1: number = 0
-    let gradientX2: number = 0
-    let gradientY2: number = 0
+    const gradientX1 = 0
+    const gradientY1 = 0
+    let gradientX2 = 0
+    let gradientY2 = 0
 
     let titleX: number
     let titleY: number
diff --git a/website/src/pages/heatmap/canvas.tsx b/website/src/pages/heatmap/canvas.tsx
index 8014805c6d..71174e100d 100644
--- a/website/src/pages/heatmap/canvas.tsx
+++ b/website/src/pages/heatmap/canvas.tsx
@@ -87,8 +87,8 @@ const initialProperties: CanvasUnmappedProps = {
     opacity: defaults.opacity,
     activeOpacity: defaults.activeOpacity,
     inactiveOpacity: defaults.inactiveOpacity,
-    borderWidth: defaults.borderWidth,
-    borderColor: defaults.borderColor,
+    borderWidth: 1,
+    borderColor: '#000000',
 
     enableLabels: false,
     labelTextColor: defaults.labelTextColor,